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板 引擎 、 框 架 和 库 、 同 服务 器 的 消息 通信 等 内 容 。 书 中 同样 提供 了 大 和 
多 重要 的 概念 。 除 此 之 外 ， 作 者 在 MVC 和 架构 方面 的 很 多 观点 都 很 有 
员 ， 读 完 本 书后 也 会 受益 菲 浅 。 


本 书 适合 从 事 JavaScript 开发 ， 寻 求 进 阶 的 前 端 











































































































内 容 简 介 
已 经 越 来 越 向 传统 应 用 软件 
凡 用 架构 等 理论 也 在 慢 慢 地 融入 Web 前 站 
LE 论 到 网 络 协议 、 从 模块 解 厅 到 异 : 
来 说 ， 这 些 知 识 正 是 突破 自己 的 瓶颈 所 或 需 的 。 
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发 靠拢 了 ，Web 和 应 用 之 间 的 界限 也 进一步 模糊 。 传 
上 所 涵盖 的 知识 点 非常 
编程 模型 、 从 HTML5/CSS3 到 NodeJS、 从 软件 测试 





state of the art) 的 JavaScript 应 用 ， 包 括 软 件 架 构 、 模 
的 示例 代码 ， 可 以 帮助 你 更 深入 地 理解 很 
启发 性 ， 即 使 你 不 是 一 名 JavaScript 程序 
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O’Reilly Media 通过 图 书 、 杂 志 、 在 线 服务 、 调 查 研 究 和 会 议 等 方式 传播 创新 知识 。 自 
1978 年 开始 ,O'Reilly 一 直 都 是 前 治 发 展 的 见证 者 和 推动 者 。 超 级 极 客 们 正在 开创 着 未 来 ， 
而 我 们 关 广 真正 重要 的 技术 趋势 一 一 通过 放大 那些 “细微 的 信号 ”来 刺激 社会 对 新 科技 
的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 对 创新 的 倡导 、 创 造 和 
发 扬 光 大 。 





O’Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN) ;组 
织 ed ne dd 六 名 ; 创立 了 Make 杂志 ， 
从 而 成 为 DIY 革命 的 主要 先锋 ; 公司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 人 的 纽带 。 
O’Reilly 的 会 议和 峰会 集聚 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 同 描绘 出 开创 新 
产业 的 革命 性 思想 。 作 为 技术 人 士 获 取信 息 的 选择 ，O’Reilly 现在 还 将 先锋 专家 的 知识 
传递 给 普通 的 计算 机 用 户 。 无论 是 通过 书籍 出 版 ,在 线 服 务 或 者 面授 课程 ,每 一 项 O’Reilly 
的 产品 都 反映 了 公司 不 可 动摇 的 理念 一 一 信息 是 激发 创新 的 力量 。 








业界 评论 
“O?"Reilly Radar 博客 有 口 萤 碑 。” 
——Wired 
“O’Reilly 凭借 一 系列 (真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 业 
务 。 


一 一 Business 2.0 
“O"Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 
一 一 CRN 
“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 
一 一 Irish Times 
“Tim 是 位 特 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 按照 
Yogi Berra 的 建议 去 做 了 :“ “如果 你 在 路 上 遇 到 贫 路 口 ， 走 小 路 〈 含 路 ) 。 
Tim 似乎 每 一 次 都 选择 了 小 路 , 而 且 有 几 次 都 是 一 闪 即 逝 的 机 会 ,尽管 大 路 也 不 错 。 


一 一 LInux Journal 
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从 第 一 眼看 到 封面 上 这 只 获 歼 的 猫 头 认 开 始 ， 就 深 深 地 喜欢 上 了 这 本 JavaScript Web 
Applications， 读 了 简介 和 目录 之 后 就 已 经 不 能 自拔 了 。 这 几 年 鲜 有 深入 讲 架构 级 web 
app 的 好 书 ， 这 让 这 本 JavaScript Web Applications 更 加 难得 ， 作 为 O'Reilly 第 一 本 专注 
于 纯 高 端 JavaScript 架构 思想 的 书 ， 凡 是 有 一 点 “架构 情节 ”的 工程 师 都 不 应 当 错 过 。 





如 今 Web 应 用 程序 的 开发 已 经 越 来 越 向 传统 应 用 软件 开发 靠拢 了 ，Web 和 应 用 之 间 的 
界限 也 进一步 模糊 。 传 统 编程 语言 中 的 设计 模式 、MVC、 应 用 架构 等 理论 也 在 慢 慢 地 融 
入 Web 前 端 开 发 。 随 着 服务 器 端 JavaScript 和 移动 终端 的 兴起 ， 作 为 一 名 前 端 工程 师 ， 
也 深 知 自己 正 处 在 一 个 深刻 变革 的 年 代 ， 面 对 眼花 练 乱 的 新 概念 和 新 技术 更 应 当 把 握 本 
质 、 认 清 方向 ， 勇 于 创新 和 实践 ， 而 这 本 JavaScript Web 4pplications 的 出 现 更 是 一 阵 及 
时 雨 ， 为 我 们 工作 中 过 到 的 很 多 难题 提供 了 解决 方案 和 最 佳 实践 。 同 时 ， 这 本 书 所 涵盖 
的 知识 点 非常 全 面 ， 从 MVC 的 基本 理论 到 网 络 协 议 、 从 模块 解 而 到 异步 编程 模型 、 从 
HTML5/CSS3 到 NodeJS、 从 软件 测试 到 部 署 调试 ， 对 于 很 多 前 端 工 程 师 来 说 ， 这 些 知 
识 正 是 突破 自己 的 瓶颈 所 了 玛 需 的 。 





这 本 书 将 专注 于 讲述 如 何 构 建 “ 优 雅 又 不 失 高 水 准 ”(state of the art) 的 JavaScript 应 用 ， 
包括 软件 架构 、 模 板 引 擎 、 框 架 和 库 、 同 服务 器 的 消息 通信 等 内 容 。 书 中 同样 提供 了 大 
量 的 示例 代码 ， 可 以 帮助 你 更 深入 地 理解 很 多 重要 的 概念 。 除 此 之 外 ， 作 者 在 MVC 和 
架构 方面 的 很 多 观点 都 很 有 启发 性 ， 即 使 你 不 是 一 名 JavaScript 程序 员 ， 读 完 本 书后 也 


会 受益 匪 浅 。 





本 书 作者 Alex MacCaw 是 一 名 Ruby/JavaScript 程序 员 ， 是 Spine 框架 的 开发 者 。 在 翻 
译本 书 的 过 程 中 ， 我 深 深 体会 到 他 作为 一 名 优秀 工程 师 所 具备 的 扎实 的 计算 机 专业 功底 
和 让 人 敬佩 的 开源 精神 。 尽 管 这 本 书包 含 大 量 的 专业 术语 ， 但 作者 文笔 轻松 流畅 ， 即 使 
直接 读 原 文 也 丝毫 不 会 感到 枯燥 ， 所 以 我 们 在 翻译 过 程 中 也 是 非常 小 心 ， 生 怕 丢 掉 这 种 





轻松 流畅 的 阅读 感觉 ， 尽 力 为 大 家 原 半 原味 地 呈现 本 书 。 当 然 由 于 专业 知识 所 限 ， 翻 译 
过 程 难免 足 漏 ， 还 希望 各 位 高 手 批评 指正 。 


最 后 ， 我 要 感谢 博文 视点 的 张 春 雨 在 译 书 过 程 中 给 予 我 们 的 帮助 和 信任 。 感 谢 我 的 好 友 
王 保平 ( 玉 伯 ) 对 很 多 关键 的 技术 性 问题 提出 的 宝贵 意见 ,还 要 感谢 可 爱 的 同事 杨 振 楠 ( 栋 
寒 )、 杨 翰 文 〈 地 极 )、 李 燕 青 〈 霸 先 )、 车 思 慧 〈《 灵 玉 )、 陈 恨 〈 舒 克 ) 的 细心 校对 ， 他 
们 给 译文 提 了 很 多 中 肯 的 建议 。 当 然 ， 最 最 需要 感谢 的 是 家 中 的 “领导 ”， 已 经 记 不 得 
多 少 次 赶 译 稿 加 班 太 晚 ， 得 到 的 不 是 你 的 抱 急 ， 而 是 你 的 鼓励 ， 这 让 我 至 今 备 感 温暖 。 


李 唱 ( 技 赤 ) ， 张 散 集 (一 舟 ) 
2011 年 12 月 北京 
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1995 年 随 着 Netscape 浏览 器 的 发 布 ,， JavaScript 也 作为 它 的 组 成 部 分 进入 到 公众 的 视野 ， 
之 后 JavaScript 的 发 展 道路 尽管 充满 坎坷 但 成 长 飞速 ， 如 今 得 益 于 高 性 能 的 IT (just in 
time) 解析 引擎 ，( 在 浏览 器 端 ) JavaScript 已 经 无 所 不 和 人 了。 仅仅 在 5 年 以 前 ， 开 发 者 
还 在 使 用 Ajax 写 一 些 短小 的 代码 或 热 囊 于 实现 一 些 类 似 “ 黄 色 渐 褪 技 术 ” 的 网 页 特效 ; 
而 现在 ， 复 杂 的 JavaScript 应 用 已 经 可 以 写 上 成 百 上 千 行 的 代码 了 。 








就 在 去 年 ， 互 联网 出 现 了 一 股 追 捧 JavaScript 应 用 的 浪 淹 ， 很 多 人 开始 着 迷 于 给 Web 应 
用 加 入 很 多 桌面 软件 的 交互 元 素 ， 增 强 Web 应 用 的 用 户 体验 ， 这 种 趋势 犹如 星星 之 火 迅 
速 蔓延 至 整个 互联 网 。 在 过 去 ， 在 浏览 器 性 能 不 佳 的 情况 下 ， 用 户 在 进行 Web 应 用 时 
每 次 交互 都 要 刷新 页 面 ， 而 且 页 面 加 载 很 慢 。 而 如 今 JavaScript 引擎 已 经 变 得 异常 强大 ， 
我 们 可 以 将 很 多 交互 行为 植 和 人 客户 端 ， 这 样 交 互 的 响应 就 会 非常 及 时 ， 增 强 体验 。 





当然 获得 提升 的 不 仅仅 是 JavaScript 引擎 的 性 能 。 尽 管 CSS3 和 HTMLS5 规范 现在 仍 在 
修订 之 中 ， 也 已 经 有 很 多 现代 浏览 器 广泛 支持 这 些 新 特性 了 ， 比 如 Safari、Chrome 和 
Firefox，IE9 也 在 一 定 程度 上 支持 这 些 新 特性 。 利 用 这 些 特 性 可 以 花 更 少 的 时 间 做 出 更 
棒 的 视觉 效果 ， 而 且 不 用 花 精 力 做 图 片 的 切 制 和 拼合 来 模拟 视觉 效果 。 现 在 浏览 器 的 升 
级 也 很 快 ， 对 HTML5 和 CSS3 的 支持 也 一 天 比 一 天 好 。 但 你 还 是 要 定义 一 个 浏览 器 测 
试 基准 (你 的 应 用 所 支持 的 最 低 标 准 的 客户 端 软件 和 版 本 )， 基 于 此 才能 更 加 合理 地 选 
择 所 需 的 技术 。 





将 应 用 的 重心 从 服务 器 迁移 到 客户 端 并 不 轻松 ， 这 和 构建 服务 器 应 用 的 方法 完全 不 一 样 。 
你 需要 想 清楚 架构 、 模 板 、 与 服务 器 端的 通信 、 框 架 等 ， 这 些 正 是 本 书 所 涵盖 的 内 容 。 
我 将 手把手 教 你 如 何 构 建 “ 优 雅 又 不 失 高 水 准 ” 的 JavaScript 应 用 。 


本 书 的 目标 读者 

本 书 不 是 为 JavaScript 初学 者 所 写 ， 如 果 你 对 JavaScript 这 门 语 言 缺 乏 基 本 的 了 解 和 
认识 ， 我 建议 你 先 阅读 一 些 更 基础 的 书 ， 比 如 Douglas Crockford 著 的 JavaScript: The 
Good Parts (http://oreilly.com/catalog/9780596517748) (O’Reilly)。 本 书 更 适合 有 一 些 
JavaScript 开发 经 验 的 开发 者 ,比如 使 用 jQuery 类 库 的 开发 者 ,或 者 当 你 希望 构建 更 复杂 、 
更 高 级 的 JavaScript 应 用 时 ， 本 书 也 是 适合 你 的 。 此 外 ， 本 书 的 很 多 章节 ， 特 别 是 附录 ， 
对 于 有 经 验 的 JavaScript 开发 者 来 说 也 是 非常 有 帮助 的 。 


六 DSS 
本 书 的 内 容 组 织 
第 1 章 
本 章 从 JavaScript 的 发 展 历 程 开 始 ， 介 绍 了 JavaScript 的 发 展现 状 和 对 互联 网 的 巨大 
影响 。 然 后 轻描淡写 地 介绍 了 MVC 的 基本 概念 ， 随 后 又 讲解 了 JavaScript 的 构造 函 
数 、 原 型 继承 及 如 何 使 用 JavaScript 创建 一 个 类 库 。 


第 2 章 
本 章 主 要 介绍 了 浏览 器 的 事件 机 制 ， 包 括 事件 机 制 的 发 展 历史 ，API 设计 和 事件 模 
型 的 行为 和 实现 。 然 后 讲解 了 如 何 基于 jQuery 绑 定 事件 监听 、 使 用 代理 ， 以 及 创建 
自 定义 事件 。 最 后 使 用 发 布 / 订阅 模式 实现 了 “DOM 无 关 ” 事 件 。 


生生 Sa 


箱 3 草 
本 章 讲 解 了 如 何在 你 的 应 用 中 使 用 MYVC 模型 ， 包 括 加 载 和 操作 远程 数据 。 我 们 将 
会 提 到 为 什么 在 构建 ORM 类 库 的 时 候 使 用 MVC 和 命名 空间 是 如 此 之 重要 ， 以 及 
如 何 使 用 ORM 类 库 来 管理 模型 数据 。 接 下 来 讲解 了 如 何 使 用 JSONP 和 跨 域 Ajax 
来 加 载 远 程 数据 。 最 后 介绍 了 如 何 通过 使 用 HTML5S 本 地 存储 和 将 本 地 存储 提交 至 
RESTful 服务 器 ， 来 实现 模型 数据 的 持久 化 。 





第 4 章 
本 章 演 示 了 如 何 使 用 控制 器 模式 在 客户 端 保持 一 个 状态 。 我 们 将 讨论 如 何 将 逻辑 封 
装 成 模块 、 阻 止 全 局 命名 空间 的 污染 ， 然 后 介绍 如 何 使 用 视图 来 进一步 简化 控制 器 
的 结构 ， 以 及 怎样 在 视图 中 实现 DOM 事件 监听 。 本 章 的 最 后 将 会 讨论 路 由 选择 ， 
包括 使 用 URL 中 的 hash 片段 ， 使 用 新 的 HTML5 History API 等 技术 ， 以 及 确保 解 
释 两 种 方法 的 利 商 。 








本 章 介 绍 了 视图 和 JavaScript 模板 ,给 出 了 多 种 动态 演 染 视图 的 方式 ， 以 及 很 多 模 








板 类 库 和 存储 模板 的 方式 〈 使 用 行内 形式 存储 模板 、 使 用 script 标签 ， 以 及 远程 加 
载 )。 接 下 来 ， 你 会 接触 到 数据 绑 定 的 一 些 内容 ， 包 括 使 模型 控制 器 、 视 图 与 模型 数 
据 、 视 图 数据 动态 同步 连接 。 





和 各- 2 


名 0 草 
本 章 详 细 介绍 了 使 用 CommonJS 模块 系统 来 做 JavaScript 的 依赖 管理 。 开 始 会 介 
绍 CommonJS 背后 的 历史 和 思想 ， 接 下 来 会 讲解 如 何在 浏览 器 端 使 用 CommonJS 
模块 ， 包 括 介 绍 一 些 模块 加 载 器 类 库 ， 比 如 Yabble 和 RequireJS。 然 后 ， 我 们 讨论 
了 如 何 自动 在 服务 器 端 包装 模块 ， 从 而 提高 性 能 、 节 省 时 间 。 本 章 的 最 后 会 介绍 
CommonJS 的 一 些 赫 代 方 案 ， 比 如 Sprockets 和 LABjs。 


第 7 章 
这 里 将 会 讲 到 HTML5 带 给 我 们 的 一 些 好 处 : 文件 操作 API。 本 章 将 会 涵盖 文件 操 
作 API 的 浏览 器 支持 情况 、 多 文件 上 传 、 拖 忠 上 传 文件 及 使 用 剪 切 板 事 件 。 接 下 来 
会 介绍 使 用 二 进 制 大 文件 和 文件 切割 来 读 文 件 ， 同 时 将 读 取 的 结果 在 浏览 器 中 输出 。 
然后 讲解 使 用 XHR (XMLHttpRequest) Level 2 规范 来 实现 在 后 台 上 传 文件 ， 最 后 
向 大 家 展示 一 个 使 用 jQuery Ajax API 实现 文件 上 传 进度 指示 的 例子 。 


第 8 章 
本 章 主 要 关注 实时 应 用 和 WebSocket 技术 的 一 些 令 人 兴奋 的 发 展 趋势 。 首 先 介 
绍 实时 应 用 的 发 展 历史 及 各 种 实现 技术 的 浏览 器 兼容 性 情况 。 然 后 更 详细 地 介绍 
WebSocket 和 基于 它 的 更 高 级 的 实现 ， 包 括 训 览 器 兼容 性 和 JavaScript API。 接 下 来 
展示 一 个 使 用 WebSocket 实现 的 简单 的 RPC 服务 ， 看 一 下 如 何在 客户 端 和 服务 器 端 
之 间 建 立 连接 。 然 后 介绍 Socket.IO 和 如 何 搭建 实时 架构 ， 最 后 介绍 用 户 体 验方 面 
的 一 些 考量 。 








第 9 章 
本 章 主 要 讲解 测试 和 调试 的 内 容 ， 这 些 内 容 是 JavaScript 网 络 应 用 开发 过 程 中 的 关 
键 环 节 。 我 们 的 话题 将 围绕 跨 浏览 器 测试 的 主题 进行 展开 ， 介 绍 浏 览 器 基准 的 选择 、 
单元 测试 和 测试 类 库 ， 比 如 QUnit 和 Jasmine。 接 下 来 ， 介 绍 自动 化 测试 和 持续 集 
成 服务 器 ， 比 如 Selenium。 然 后 讲解 调试 相关 的 内 容 ， 研 究 了 Firefox 和 WebKit 网 
络 监 测 器 、 主 控 台 ， 以 及 使 用 JavaScript 调试 器 。 


第 10 章 
本 章 介 绍 了 另外 一 个 非常 重要 却 又 极 易 被 忽略 的 内 容 一 一 JavaScript 网 络 应 用 的 部 
署 。 我 们 主要 考虑 性 能 方面 ， 以 及 如 何 使 用 缓存 、 代 码 压 缩 、gzip 压缩 及 其 他 减少 
应 用 初始 化 加 载 时 间 的 技术 。 最 后 简单 讲解 了 如 何 使 用 CDN 服务 器 来 让 我 们 的 工 
作 事 半 功 倍 ， 以 及 如 何 使 用 浏览 器 内 置 的 策略 来 提升 你 站 点 的 性 能 。 





第 11 音 
接 下 来 的 3 章 主要 介绍 了 一 些 流行 的 JavaScript 类 库 ， 这 些 类 库 常 用 来 做 JavaScript 
应 用 开发 。Spine 是 一 个 轻 量 级 的 MVC-compliant 类 库 ， 这 个 类 库 使 用 了 本 书 中 讲 
到 的 很 多 概念 。 本 章 将 会 为 你 介绍 类 库 的 核心 部 分 : 类 、 事 件 、 模 型 和 控制 右 。 最 
后 本 章 用 一 个 管理 应 用 的 例子 来 展示 本 章 所 讲 到 的 知识 点 。 

第 12 章 
Backbone 是 一 个 非常 流行 的 类 库 ， 使 用 这 个 类 库 可 以 非常 高 效 地 构建 JavaScript 应 
用 ,本 章 主要 介绍 这 个 类 库 。 本 章 会 涵盖 Backbone 的 核心 观念 和 类 ,比如 模型 .集合 、 
控制 器 和 视图 等 。 接 下 来 会 介绍 使 用 RESTful JSON 请 求 从 服务 器 同步 获取 模型 数据 ， 
以 及 如 何在 服务 器 端 啊 应 Backbone。 最 后 我 们 给 出 一 个 待 办 事项 列表 应 用 的 例子 ， 
来 向 大 家 展示 如 何 使 用 这 个 类 库 。 


第 13 章 
本 章 主 要 介绍 了 JavaScriptMVC 类 库 ， 这 是 一 个 流行 的 基于 jQuery 的 框架 ， 用 来 构 
建 JavaScript 网 络 应 用 。 在 本 章 中 你 将 会 学 到 JavaScriptMVC 的 一 些 基 础 知识 ， 比 
如 类 、 模 型 和 控制 器 ， 同 时 还 包含 客户 端的 模板 及 泻 染 视图 。 本 章 的 最 后 会 给 出 一 
个 实际 的 CRUD 列表 的 例子 ， 给 读者 展示 使 用 JavaScriptMVC 创建 抽象 的 、 可 重用 
的 、 节 省 内 存 的 组 件 是 多 么 的 简单 。 





附录 A 
附录 A 中 是 对 jQuery 的 简要 介绍 ， 如 果 你 想 温 习 类 库 内 容 ， 则 这 部 分 内 容 对 你 会 非 
第 有 帮助 。 本 书 中 大 部 分 示例 代码 都 是 基于 jQuery 的 ,首先 熟悉 jQuery 是 很 重要 的 。 
这 一 部 分 会 讲 到 大 部 分 核心 的 API， 比 如 DOM 操作、DOM 查询 和 遍历 ， 以 及 事件 
绑 定 、 触 发 和 事件 代理 。 接 下 来 会 讲解 jQuery 的 Ajax API， 包 括 POST、GET 和 
JSON 请 求 。 随 后 将 介绍 jQuery 扩展 ， 如 何 使 用 jQuery 来 封装 一 个 播 件 ， 让 你 的 代 
码 更 具 通用 性 。 最 后 展示 了 一 个 实际 的 例子 : 创建 一 个 Growl jQuery 插件 。 


附录 B 
附录 B 的 内 容 主 要 是 讲解 Less，Less 是 CSS 的 超 集 ， 它 使 用 变量 、 混 合 、 操 作 符 
和 优雅 的 规则 扩展 了 CSS 本 身 的 语法 。 利 用 这 些 规则 可 以 极 大 地 减少 你 所 写 的 CSS 
代码 量 ， 特 别 是 使 用 CSS3 效果 更 佳 。 附 录 B 包含 Less 的 主要 的 增强 的 语法 ， 以 及 
如 何 使 用 命令 行 工具 和 JavaScript 类 库 来 将 Less 文件 编译 成 CSS。 


附录 C 
附录 C 主要 讲解 了 CSS3。 首 先 介 绍 了 一 些 CSS3 的 背景 知识 、 训 览 器 厂商 的 前 绥 ， 
然后 开始 介绍 CSS3 的 主要 内 容 ， 从 主要 附件 到 规格 说 明 。 这 里 介绍 的 CSS 特性 





主要 包括 : 圆 角 、rgba 颜 色 、 了 阴影、 潮 变 、 动 画 和 变换 。 附 录 的 最 后 讨论 了 使 用 
Modernizr 实现 的 优雅 降级 ， 并 展示 了 一 个 实际 的 使 用 box-sizing 规范 的 例子 。 


本 书 的 约定 
本 书 使 用 下 列 排版 约定 : 


斜体 Italic 
用 于 表示 新 术语 、URL、 电 子 邮件 地 址 、 文 件 名 、 文 件 扩展 名 和 事件 。 

等 宽 字 体 Constant width 
用 来 表示 计算 机 代码 片段 , 包括 命令 、 数组、 元 素 、 语句、 操作 符 、 变量、 属性 .关键 字 、 
国 数 、 类 型 、 类 、 命 名 空间 、 方 法 、 形 参 、 实 参 、 值 、 对象、 事件 处 理 程序 .XML 标签 、 
HTML 标签 、 安 指令 、 文 件 内 容 及 命令 行 的 输出 等 。 

等 宽 加 粗 字 体 Constant width botLd 
用 来 表示 命令 或 者 其 他 用 户 输入 的 文本 。 

等 宽 斜 体 Constant width italic 
用 来 表示 可 被 志 换 的 字符 或 文本 ， 这 些 字符 在 合适 的 场景 和 特定 的 条 件 下 会 被 替换 
成 其 他 的 值 。 





一] ”这 个 图 标 表示 一 种 提示 、 建 议 或 一 般 的 消息 提醒 。 








网 这 个 图 标 表示 一 种 警告 。 





we 


中 文 版 书 中 切口 处 的 “上 >” 表 示 原 书页 码 ， 便 于 读者 与 原 英 文 版 图 书 对 照 阅 读 ， 本 书 的 索引 所 列 
页 码 为 原 英文 版 页 码 。 


附加 文件 


本 书 的 附加 文件 都 存放 在 GitHub 上 (https://github.com/maccman/book-assets)， 可 以 
直接 在 GitHub 上 查看 ， 也 可 以 下 载 压缩 包 (https://github.com/maccman/book-assets/ 
zipball/master)。 所 有 这 些 示 例 代 码 都 以 童 市 为 单位 存放 ,都 已 经 包含 了 各 自 所 需 的 类 库 ， 
本 书 中 用 到 的 大 多 数 示例 代码 同样 在 单独 的 文件 中 。 











在 本 书 中 凡是 引用 这 些 附加 文件 的 地 方 ， 都 会 以 这 种 形式 表述 : assets/chapter_number/ 


Name,。 





代码 约定 

本 书 中 我 们 以 assert() 和 assertEqual() 函数 来 展示 变量 的 值 或 者 函数 调用 的 结果 。 
assert() 是 一 种 快捷 表述 方式 ， 用 来 表示 一 个 特定 的 变量 是 真 值 。 这 在 自动 化 测试 中 是 
一 种 非常 常见 的 模式 。assert() 可 以 接收 两 个 参数 : 一 个 值 和 一 个 可 选 的 消息 。 如 果 运 
行 结果 不 是 真 值 ， 这 个 函数 将 抛 出 一 个 异常 : 








var assert = function(value, msg) { 
if ( lIvalue ) 
throw(msg || (value + " does not equal true")); 


}; 
assertEqual() 是 表示 一 个 值 等 于 另外 一 个 值 的 另 一 种 表述 。 它 和 assert() 类 似 , 但 
接收 两 个 值 。 如 果 这 两 个 值 不 相等 ， 则 这 个 断言 失败 : 





var assertEqual = function(vall, val2, msg) { 
if (vall !== val2) 
throw(msg || (vall + " does not equal " + val2)); 
}; 
这 两 个 函数 非常 人 简单， 正如 你 在 示例 代码 中 所 看 到 的 。 如 果断 言 失 败 ， 你 会 在 浏览 器 的 
控制 台中 看 到 一 个 错误 消息 : 


assert( true ); 


// 和 assertEqual() 等 价 
assert( false === false ); 


assertEqual( 1, 1 ); 


我 们 可 以 从 代码 中 看 出 ， 对 象 比 较 会 失败 ， 除 非 两 个 对 象 是 指 问 同 一 块 内 存 的 引用 。 解 
决 办 法 是 次 比较 ， 在 assets/ch00/deep_equality.html 这 个 例子 中 可 以 看 到 完整 的 代码 。 


jQuery 示例 代码 

本 书 的 大 部 分 示例 代码 都 是 基于 jQuery (http:/jquery.com) 的 ，jQuery 是 现在 最 流行 
的 JavaScript 类 库 ， 它 对 事件 、DOM 遍历 、DOM 操作 和 Ajax 都 做 了 封装 。 这 里 我 选用 
jQuery 是 出 于 几 个 原因 的 考虑 ， 最 主要 的 原因 是 jQuery 可 以 让 代码 变 得 非常 简洁 ， 而 且 
当下 大 部 分 人 对 jQuery 都 非常 熟悉 ， 一 看 即 懂 。 

如 果 你 没有 使 用 过 jQuery ,我 强烈 推荐 你 首先 看 一 下 jQuery 的 文档 。 它 的 API 非常 不 错 ， 
为 DOM 提供 了 一 组 非常 棒 的 抽象 的 接口 。 可 以 在 附录 A 中 查阅 到 简短 的 jQuery 入 门 





Holla 


Holla (http://github.com/maccman/holla) 贯穿 本 书 始 终 ， 它 是 一 个 JS 群 聊 应 用 。Holla 
是 一 个 非常 不 错 的 示例 应 用 ， 因 为 它 和 本 书 中 大 多 数 章节 和 内 容 都 有 交集 。 除 了 正文 章 
市 中 对 Holla 的 讲述 之 外 ，Holla 为 我 们 展示 了 : 


。 ”使 用 CSS3 和 HTMLS5 来 构建 美观 的 界面 。 

。 拖 电 上 传 文件 。 

。 使 用 Sprockets 和 Less 来 编写 代码 。 

。 ”使 用 WebSocket 将 数据 发 送 给 客户 端 。 

。 创建 带 有 状态 的 JavaScript 应 用 。 

可 以 从 Holla 的 GitHub 的 代码 库 (http:/Ngithub.com/maccman/holla) 中 将 代码 复制 下 
来 ， 研 读 一 下 它 的 代码 。 本 书 中 用 到 的 很 多 例子 都 来 自 Holla 的 源 代 码 ，Holla 的 界面 
如 图 P-1。 


MND Holla 
Lbs it)® mp/ /ocathost 3000/ © MA: congle 2 





Holla 


Proflle 


Activity 


Setings 


Channels 到 


Sales mn) Screenshot2010-11-02at16.51.15.png 





图 P-1: Holla 聊 天 应 用 程序 运行 界面 
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Safari? Books Online 


Gafari> Safari 在 线 图 书 是 一 个 数字 图 书馆 ， 读 者 可 以 在 这 个 图 书馆 里 自选 图 书 ， 
“在 这 里 可 以 搜索 到 超过 7500 本 技术 相关 的 书籍 创作 和 视频 ， 在 这 里 可 以 迅 


速 找 到 你 想 要 的 内 容 。 





订阅 之 后 ， 你 就 可 以 阅读 在 线 图 书馆 的 任意 图 书 的 任意 章节 和 任意 视频 。 你 还 可 以 将 图 
书 下 载 到 手机 里 。 在 纸 质 书籍 出 版 前 就 可 以 抢先 阅读 ， 甚 至 可 以 抢先 阅读 作者 手稿 ， 并 
实时 给 作者 反馈 。 同 时 还 可 以 复制 粘贴 实例 代码 、 组 织 你 的 收藏 内 容 、 下 载 章 节 、 将 关 
键 段 落 加 入 书签 、 创 建 笔记 、 打 印 出 来 ， 你 既 可 以 节省 时 间 又 可 以 提升 阅读 效率 。 





O’Reilly 已 经 将 本 书 (英文 版 ) 上 传 至 Safari 在 线 图 书馆 里 了 。 如 果 想 在 线 阅 读本 书 和 
其 他 相关 内 容 ， 请 免费 登录 hitip://my.safaribooksonline.com。 
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如 采 要 留言 或 者 提交 关于 本 书 的 技术 问题 的 反馈 ， 请 发 邮件 至 : 


bookquestions(@oreilly.com 


本 书 的 更 多 信息 、 资 源 、 参 考 文献 和 新 闻 ， 请 登录 出 版 社 官网 
或 者 http:/www.oreilly.com.cn/。 
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第 1 章 一 


MVC 和 类 





ES 银 

取 全 

JavaScript 程序 开发 已 经 和 最 初 我 们 想象 中 的 模样 有 了 天 壤 之 别 ， 也 很 少 有 人 能 记 起 
从 JavaScript 诞 生 之 初 的 Netscape 训 览 器 到 如 今 异 常 强 大 的 解析 引擎 一 一 比如 Google 
的 V8 一 一 的 进化 历程 。JavaScript 到 ECMAScript 的 标准 化 道路 也 充满 坎坷 。 然 而 对 于 
JavaScript 的 发 明 者 来 说 ， 做 梦 也 不 会 想到 JavaScript 会 有 今天 这 么 强大 。 








尽管 JavaScript 已然 非常 成 功 和 流行 ， 但 仍然 被 大 多 数 人 所 误解 。 只 有 少数 人 知道 
JavaScript 是 一 种 强大 的 、 动 态 的 面向 对 象 编 程 语言 。JavaScript 中 诸如 原型 继承 、 模 块 
和 命名 空间 等 高 级 特性 依然 会 让 很 多 人 感到 吃惊 。 那 么 ,为 什么 这 门 语言 会 如 此 被 误解 ? 


一 个 原因 是 早期 的 JavaScript 实现 非常 糟糕 ， 有 很 多 bug ; 另 一 个 原因 是 因为 其 名 字 带 
有 “Java” 前 级 , 让 人 以 为 它 和 Java 有 关系 。 实 际 上 , 它 和 Java 是 完全 不 同 的 两 种 语言 。 
然而 ， 在 我 看 来 ， 真 正 的 原因 在 于 大 多 数 开发 者 接触 和 使 用 JavaScript 的 方式 。 对 于 其 
他 语言 来 说 ， 比 如 Python 和 Ruby， 开 发 者 必须 要 坚持 阅读 技术 文档 、 视 频 教程 和 学 习 
肯 南 。 但 是 直到 现在 ， 使 用 JavaScript 开发 程序 也 不 用 这 样 ， 开 发 者 的 需求 往往 是 给 现 
有 代码 添加 一 个 表单 验证 、 弹 出 框 或 图 片 轮 播 控件 ， 而 且 工 期 也 很 紧 。 因 此 他 们 直接 去 
网 上 找 一 段 能 用 的 代码 就 可 以 了 ， 而 不 必 花 时 间 去 学 习 和 理解 这 门 语 言 。 很 多 人 就 是 这 
样 开 始 接触 JavaScript 的 ， 并 堂而皇之 地 把 JavaScript 技能 写 入 他 们 的 简历 。 





现在 ，JavaScript 引 敬 和 浏览 器 已 经 变 得 非常 强大 ， 使 用 JavaScript 来 构建 庞大 的 应 用 
已 经 屡见不鲜 ,而且 越 来 越 流 行 。 像 Gmail 和 Google Maps 之 类 的 产品 给 我 们 带 来 了 
Web 应 用 全 新 的 体验 ， 开 发 者 们 顿时 趋 之 若 仪 。 公 司 开始 雇 用 全 职 的 JavaScript 程序 员 ， 
JavaScript 也 早已 不 再 是 只 能 完成 表单 验证 的 “不 入 流 的 脚本 语言 ”了 。 现 在 凭借 其 自 
身 独特 的 优势 ，JavaScript 已 经 成 为 一 门 独 立 的 、 潜 力 无 穷 的 编程 语言 。 <2 | 





这 种 趋势 说 明 JavaScript 应 用 会 如 雨后春笋 一 般 遍 地 开花 。 不 地 的 是 ， 可 能 是 因为 
JavaScript 糟糕 的 过 去 ， 很 多 JavaScript 应 用 的 架构 是 非常 脆弱 的 。 某 些 原因 是 ， 当 使 用 
JavaScript 开发 应 用 时 ， 那 些 经 典 的 设计 模式 和 最 佳 实践 被 抛 在 了 脑 后 。 开 发 者 往往 忽 
略 架构 模型 ， 比 如 MVC 模型 ， 而 常 将 应 用 中 的 HTML 和 JavaScript 混杂 在 一 起 ， 看 着 


像 一 个 大 杂烩 。 


本 书 不 会 教 给 你 JavaScript 是 一 门 什么 样 的 语言 ， 你 可 以 阅读 其 他 书籍 来 学 习 使 用 
JavaScript， 比 如 Douglas Crockford 的 JavaScript: The Good Parts (http://goo0.gl/JDoIT) 
(O’Reilly)。 但 是 ， 本 书 将 会 向 你 展示 如 何 搭建 复杂 的 JavaScript 应 用 ， 教 你 创造 不 可 思 
议 的 网 络 用 户 体验 。 


增加 结构 


构建 大 型 的 JavaScript 应 用 的 秘诀 是 “不 要 ”构建 大 型 JavaScript 应 用 。 相 反 ， 你 应 当 
把 你 的 应 用 解 耦 成 一 系列 相互 平等 且 独 立 的 部 分 。 开 发 者 常 犯 的 错误 是 创建 应 用 时 使 用 
了 很 多 互相 依赖 的 部 分 ， 用 了 很 多 JavaScript 文件 ， 并 在 HTML 页 面 中 用 大 量 的 script 
标签 引入 这 些 文件 。 这 类 应 用 非常 难于 维护 和 扩展 ， 因 此 无 论 如 何 都 应 当 避 免 这 种 情况 
的 发 生 。 








开始 构建 你 的 应 用 的 时 候 ， 花 点 精力 来 做 应 用 的 架构 ， 会 为 最 终结 果 带 来 意 想 不 到 的 改 
观 。 不 管 你 之 前 怎么 看 待 JavaScript， 从 现在 开始 将 它 当 做 一 门面 向 对 象 的 编程 语言 来 
对 待 。 如 有 果 你 使 用 Python 和 Ruby 这 样 的 编程 语言 来 开发 应 用 ， 你 同样 会 使 用 类 、 继 承 、 
对 象 和 设计 模式 等 。 对 于 构建 服务 器 端 应 用 来 说 ， 体 系 结构 是 非常 重要 的 ， 那 么 为 什么 
不 在 客户 端 应 用 中 采用 这 些 东 西 呢 ? 





本 书 提倡 使 用 MVC 模式 ， 这 是 一 种 和 久 经 基 验 的 搭建 应 用 的 方式 ， 可 以 确保 应 用 的 可 维 
护 性 和 可 扩展 性 。MVC 模式 完全 适用 于 JavaScript 应 用 。 


什么 是 MVC 


MVC 是 一 种 设计 模式 ， 它 将 应 用 划分 为 3 个 部 分 : 数据 〈 模 型 )、 展 现 层 〈 视 图 ) 和 用 
户 交 互 层 (控制 器 )。 换 句 话说， 一 个 事件 的 发 生 是 这 样 的 过 程 : 








用 户 和 应 用 产生 交互 。 

控制 故 的 事件 处 理 器 被 触发 。 
控制 器 从 模型 中 请 求 数据 ， 并 将 其 交 给 视 
视图 将 数据 呈现 给 用 户 。 





人 [Se [we] 一 
凡 
oo 
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现在 来 看 一 个 真实 的 例子 ， 图 1-1 展示 了 在 Holla 中 如 何 发 送 新 的 聊天 消息 。 


Holla 兴 中 
Profile 
Hello therel 
Activity 


Share 
Setiings 


图 1-1: 从 Holla 中 发 送 一 个 新 的 聊天 消息 


1. ”用 户 提交 一 个 新 的 聊天 消息 。 

2. 控制 如 的 事件 处 理 器 被 触发 。 

3. ”控制 器 创建 了 一 个 新 的 聊天 模型 (Chat Model) 记录 。 
4. ”然后 控制 器 更 新 视图 。 

5. ”用 户 在 聊天 窗口 看 到 新 的 聊天 消息 。 





我 们 不 用 类 库 或 框架 就 可 以 实现 这 种 MVC 架构 模式 。 关 键 是 要 将 MVC 的 每 部 分 按照 
职责 进行 划分 ， 将 代码 清晰 地 分 割 为 若干 部 分 ， 并 保持 良好 的 解 称 。 这 样 可 以 对 每 个 间 
分 进行 独立 开发 、 测 试 和 维护 。 


下 面 来 详细 讲解 MVC 中 的 各 个 组 成 部 分 。 


模型 
模型 用 来 存放 应 用 的 所 有 数据 对 象 。 比 如 ， 可 能 有 一 个 User 模型 ， 用 以 存放 用 户 列表 、 
它们 的 属性 及 所 有 与 模型 有 关 的 逻辑 。 


模型 不 必 知 晓 视图 和 控制 器 的 细 市 ， 模 型 只 需 包 含 数据 及 直接 和 这 些 数 据 相关 的 逻辑 。 
任何 事件 处 理 代码 、 视 图 模板 ， 以 及 那些 和 模型 无 关 的 逻辑 都 应 当 隔 离 在 模型 之 外 。 将 
模型 和 视图 的 代码 混在 一 起 ， 是 违反 MVC 架构 原则 的 。 模 型 是 最 应 该 从 你 的 应 用 中 解 
耦 出 来 的 部 分 。 


当 控 制 器 从 服务 器 抓 取 数 据 或 创建 新 的 记录 时 ， 它 就 将 数据 包装 成 模型 实例 。 也 就 是 说 ， 
我 们 的 数据 是 面向 对 象 的 (object oriented)， 任 何 定 义 在 这 个 数据 模型 上 的 函数 或 逻辑 
都 可 以 直接 被 调用 。 
因此 ， 不 要 这 样 做 : 


var User = users["foo"]; 
destroyUser(user); 
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而 要 这 样 做 : 


var user = User.find("foo"); 
user.destroy(); 


第 1 段 代 码 没 有 命名 空间 的 概念 ， 并 且 不 是 面向 对 象 的 。 如 果 在 应 用 中 定义 了 另 一 个 
destroyUser() 六 数 的 话 ， 两 个 函数 就 会 产生 冲突 。 我 们 应 当 确 保全 局 变量 和 函数 的 个 
数 尽 可 能 少 。 在 第 2 段 代码 中 ，destroy() 函数 是 存放 在 命名 空间 User 的 实例 中 的 ， 
User 中 存放 了 所 有 的 记录 。 当 然 这 只 是 理想 状况 ， 因 为 我 们 控制 了 全 局 变量 的 个 数 ， 更 
好 地 避免 了 潜在 的 冲突 ， 这 种 代码 更 加 清晰 ， 而 且 非 常 容易 做 继承 ， 类 似 destroy() 的 
这 种 函数 就 不 用 在 每 个 模型 中 都 定义 一 遍 了 。 











在 第 3 章 中 我 们 会 更 深入 地 讲解 模型 ， 甚 中 包含 从 服务 器 下 载 数据 及 创建 对 象 关 系 映 射 
(ORM). 


视图 

视图 层 是 呈现 给 用 户 的 ， 用 户 与 之 产生 交互 。 在 JavaScript 应 用 中 ， 视 图 大 都 是 由 
HTML、CSS 和 JavaScript 模板 组 成 的 。 除 了 模板 中 简单 的 条 件 语句 之 外 ， 视 图 不 应 当 
包含 任何 其 他 逻辑 。 


实际 上 ， 和 模型 类 似 ， 视 图 也 应 当 从 应 用 的 其 他 部 分 中 解 耦 出 来 。 视 图 不 必 有 知晓 模型 和 
控制 器 中 的 细 闻 ， 它 们 是 相互 独立 的 。 将 逻辑 混和 人 视图 之 中 是 编程 的 大 总。 





这 并 不 是 说 MVC 不 允许 包含 视觉 呈现 相关 的 逻辑 ， 只 要 这 部 分 逻辑 没有 定义 在 视图 之 
内 即 可 。 我 们 将 视觉 呈现 逻辑 归 类 为 “视图 助手 ”(pe1per) : 和 视图 有 关 的 独立 的 小 型 
工具 函数 。 


来 看 下 面 的 例子 ， 其 在 视图 中 包含 了 逻辑， 这 是 一 个 反例 ， 平 时 不 应 当 这 样 做 : 


// template.html 
<div> 

<script> 

function formatDate(date) { 

A i 
}; 
</script> 

${ formatDate(this.date) } 
</div> 


在 这 段 代码 中 ， 我 们 把 formatDate() 国 数 直接 插入 视图 中 ， 这 违反 了 MVC 的 原则 ， 结 
果 导 致 标签 看 上 去 像 大 杂烩 一 样 不 可 维护 。 可 以 将 视觉 呈现 逻辑 剥离 出 来 放 入 视图 助手 
中 ， 正 如 下 面 的 代码 就 避免 了 这 个 问题 ， 可 以 让 这 个 应 用 的 结构 广 足 MVC。 
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// helper.js 
var helper = {}; 
heLper.formatDate = function(){ /* ... */ }; 


// template.html 
<div> 
${ helper.formatDate(this.date) } 
</div> 
此 外 ， 所 有 视觉 呈现 逻辑 都 包含 在 heLper 变量 中 ， 这 是 一 个 命名 空间 ， 可 以 防止 冲突 并 
保持 代码 清晰 、 可 扩展 。 


不 要 太 在 意 视 图 和 模板 的 细节 ， 我 们 会 在 第 $ 章 中 有 详细 讲述 。 本 小 节 的 目的 只 是 简单 
介绍 视图 和 MVC 架构 模式 之 间 的 联系 。 


控制 器 

控制 器 是 模型 和 视图 之 间 的 纽带 。 控 制 器 从 视图 获得 事件 和 输入 ， 对 它们 (很 可 能 
模型 ) 进行 处 理 ， 并 相应 地 更 新 视图 。 当 页 面 加 载 时 ， en 
比如 监听 表单 提交 或 按钮 点 击 。 然 后 ， 当 用 户 和 你 的 应 用 产生 交互 时 ， 控 制 器 中 的 事件 
触发 器 就 开始 工作 了 。 








不 用 使 用 类 库 和 框架 也 能 实现 控制 器 ， 下 面 这 个 例子 就 是 使 用 简单 的 jQuery 代码 来 实现 
的 : 


var Controller = {}; 


// 使 用 匿名 函数 来 封装 一 个 作用 域 
(Controller.users = function($){ 


var nameClick = function(){ 
ph 
}; 





// 在 页 面 加 载 时 绑 定 事件 监听 
$(function(){ 

$("#view .name").click(nameClick); 
}); 


}) (jQuery); 


我 们 创建 了 users 控制 器 ， 这 个 控制 器 是 放 在 Controller 变量 下 的 命名 空间 。 人 然后， 我 
们 使 用 了 一 个 匿名 函数 封装 es 个 作用 域 ， 以 避免 对 全 局 作用 域 造 成 污染 。 当 页 面 加 载 
时 ， 程 序 给 视图 元 素 绑 定 了 click 事件 的 监听 。 
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正如 你 所 看 到 的 ， 控 制 器 并 不 依赖 类 库 或 框架 。 然 而 ,为 了 构建 需要 的 一 个 完整 的 MVC 
框架 ,我 们 需要 将 模型 从 视图 中 抽 离 出 来 ,控制 器 和 状态 的 详细 内 容 会 在 第 4 章 详细 讲解 。 
器 模块 化 进军 ， 创 建 类 


在 讲解 MVC 的 本 质 之 前 ， 我 们 首先 给 大 家 补习 一 下 基础 知识 ， 比 如 JavaScript 的 类 和 
事件 。 只 有 打下 一 个 坚实 的 基础 ， 才 能 更 好 地 学 习 、 理 解 更 高 级 的 概念 。 





对 于 静态 的 类 来 说 ，JavaScript 对 象 直 接 量 就 已 经 够 用 了 ， 但 它 对 使 用 继承 和 实例 来 创 
建 经 典 的 类 往往 更 有 帮助 。 有 必要 强调 一 下 : JavaScript 是 基于 原型 的 编程 语言 ， 并 没 
有 包含 内 置 类 的 实现 。 但 通过 JavaScript 可 以 轻易 地 模拟 出 经 典 的 类 。 





JavaScript 中 的 类 口碑 并 不 太 好 ， 因 为 “不 够 JavaScript” 而 饱 受 批评 。jQuery 并 没有 小 
及 太 多 架构 方法 和 继承 模式 ， 这 让 JavaScript 开发 者 确信 自己 不 必 考 虑 太 多 架构 性 的 东 
西 ， 其 至 觉得 类 的 用 处 不 大 或 干脆 禁用 类 。 实 际 上 ， 类 是 另 一 种 有 用 的 工具 ， 作 为 一 名 
实用 主义 者 ， 我 相信 类 在 JavaScript 中 的 重要 性 丝毫 不 亚 于 它 在 其 他 现代 编程 语言 中 的 
重要 性 。 


JavaScript 中 并 没有 真正 的 类 ， 但 JavaScript 中 有 构造 函数 和 new 运算 符 。 构 造 函 数 用 来 
给 实例 对 象 初始 化 属性 和 值 。 任 何 JavaScript 函数 都 可 以 用 做 构造 函数 ， 构 造 函 数 必须 
使 用 new 运算 符 作 为 前 组 来 创建 新 的 实例 。 


new 运算 符 改 变 了 国 数 的 执行 上 下 文 ， 同 时 改变 了 return 语句 的 行为 。 实 际 上， 使 用 new 
和 构造 函数 很 类 似 于 传统 的 实现 了 类 的 语言 : 





var Person = function(name) { 
this.name = name; 


}; 


// 实例 化 一 个 Person 
var alice = new Person('alice'); 


// 检查 这 个 实例 

assert( alice instanceof Person ); 
构造 国 数 的 命名 通常 使 用 驼峰 命名 法 ， 首 字母 大 写 ， 以 此 和 普通 的 函数 区 分 开 来 ， 这 是 
一 种 习惯 用 法 。 记 住 这 一 点 非常 重要 ， 因 为 你 不 会 希望 用 省 略 new 前 级 的 方式 来 调用 构 
造 国 数 。 


// 不 要 这 么 做 ! 
Person('bob'); //=> undefined 
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这 个 函数 只 会 返回 undefined， 并 且 执 行 上 下 文 是 window (全 局 ) 对 象 ， 你 无 意 间 创建 
了 一 个 全 局 变量 name。 调 用 构造 函数 时 不 要 丢掉 new 关键 字 。 


当 使 用 es 数 时 ， 执 行 上 下 文 从 全 局 对 象 (window) 变 成 一 个 空 的 
上 下 文 ， 这 个 上 下 文 代表 了 新 生成 的 实例 。 因 此 ，this 关键 字 指 向 当前 创建 的 实例 。 尽 
Es 实际 上 其 他 语言 内 置 类 机 制 的 实现 也 是 如 此 。 


默认 情况 下 ,如 果 你 的 构造 函数 中 没有 返回 任何 内 容 , 就 会 返回 this 一 一 当前 的 上 下 文 。 
要 不 然 就 返回 任意 非 原 始 类 型 的 值 。 比 如 ， 我 们 可 以 返回 一 个 用 以 新 建 一 个 新 类 的 国 数 ， 
第 一 步 要 做 的 是 创建 自己 的 类 模拟 库 : 


var CLass = function(){ 
var klass = function(){ 
this.init.apply(this, arguments); 
}; 
klass.prototype.init = function(){}; 
return klass; 
}; 


var Person = new Class; 
Person.prototype.init = function()t{ 


// 基于 Person 的 实例 做 初始 化 
}; 





// 用 法 : 
var person = new Person; 





令 人 费解 的 是 ， 由 于 JavaScript 2 (http://www.mozilla.org/jis/language/is20-1999-02-18/ 
classes.html1) 规范 从 未 被 实现 过 ，cLass 一 直 都 是 保留 字 。 最 常见 的 做 法 是 将 变量 名 
class 改 为 _class 或 kLass。 


给 类 添加 函 歼 
在 JavaScript 中 ， 在 构造 函数 中 给 类 添加 函数 和 给 对 象 添 加 属性 是 一 模 一 样 的 : 
Person .find = function(id){ /*...*/ }; 
var person = Person.find(1); 
要 想 给 构造 函数 添加 实例 函数 ， 则 需要 用 到 构造 函数 的 prototype : 
Person.prototype.breath = function(){ /*...*/ }; 


var person = new Person; 











person.breath(); 
一 种 常用 的 模式 是 给 类 的 prototype 起 一 个 别名 fn， 写 起 来 也 更 简单 : 
Person.fn = Person.prototype; 


Person.fn.run = function(){ /*...*/ }; 


实际 上 这 种 模式 在 jQuery 的 插件 开发 中 是 很 常见 的 ， 将 函数 添加 至 jQuery .fn 中 也 就 相 
当 于 添加 至 jQuery 的 原型 中 。 


给 “类 ” 库 添 加 方法 
现在 ,我 们 的 “类 ” 库 (class library) “! 包含 了 生成 一 个 实例 并 初始 化 这 个 实例 的 功能 ， 
给 类 添加 属性 和 给 构造 函数 添加 属性 是 一 样 的 。 








直接 给 类 设置 属性 和 设置 其 静态 成 员 是 等 价 的 : 
var Person = new Class; 


// 直接 给 类 添加 静态 方法 
Person.find = function(id){ /* ... */ }; 


// 这 样 我 们 可 以 直接 调用 它们 
var person = Person .find(1); 


给 类 的 原型 设置 的 属性 在 类 的 实例 中 也 是 可 用 的 : 





var Person = new Class; 











// 在 原型 中 定义 函数 
Person.prototype.save = function(){ /* ... */ }; 





// 这 样 就 可 以 在 实例 中 调用 它们 
var person = new Person; 
person. save(); 


但 在 我 看 来 这 种 语法 有 些 绕 ， 不 切实 际 且 不 够 简洁 ， 很 难 一 眼 就 分 辨 出 类 的 静态 属性 和 
实例 的 属性 。 因 此 我 们 采用 另外 一 种 不 同 的 方法 来 给 类 添加 属性 ， 这 里 用 到 了 两 个 国 数 
extend() 和 incLude() : 





var Class = function () { 
var klass = function () { 
this.init.apply(this, arguments); 





译注 1: ”原文 中 此 处 和 小 标题 中 都 是 class library， 意 思 是 “ 类 机 制 的 类 库 ”， 直 译 为 “类 库 ”， 有 时 
自 





8 | 第 1 章 MVC 和 类 


}; 
klass.prototype.init = function () {}; 


// 定义 prototype 的 别名 
klass.fn = klass.prototype; 


// 定义 类 的 别名 
klass.fn.parent = klass; 





/ 给 类 添加 属性 
klass.extend = function (obj) { 
var extended = obj .extended ; 

for (var i in obj) { 
klass[i] = obj[i]; 
} 
if (extended) extended(klass) 
上 


T 





// 给 实例 添加 属性 
klass.include = function (obj) { 
var included = obj.included; 
for (var i in obj) { 
klass.fn[i] = obj[i]; 
} 
if (included) included(klass) 
}; 


return klass; 

}; 
这 段 代 码 是 “类 ” 库 的 增强 版 ， 我 们 使 用 extend() 函数 来 生成 一 个 类 ， 这 个 函数 的 参数 
是 一 个 对 象 。 通 过 间 代 将 对 象 的 属性 直接 复制 到 类 上 : 


var Person = new Class; 


Person.extend({ 
find: function(id) { /* ... */ }, 
exists: functions(id) { /* ... */ } 
}); 


var person = Person.find(1); 


include( a ena 过 不 是 将 属性 复制 至 类 中 ， 而 是 复制 至 类 
a 这 里 的 属性 是 类 实例 的 属性 ， 而 不 是 类 的 静态 属性 。 











var Person = new Class; 


Person,incLude({ 





Save : function(id) { /* ... */ }, 
destroy: functions(id) { /* ... */ } 
}); 


var person = new Person; 
person. save(); 


同样 地 ， 这 里 的 实现 支持 extended 和 inctuded 回调 。 将 属性 传人 对 象 后 就 会 触发 这 两 
个 回调 : 
Person.extend ({ 
extended: function(klass) { 
console.log(klass, " was extended!"); 
} 
}); 
如 果 你 基于 Ruby 实现 过 类 ， 会 感觉 它 的 写法 与 此 很 相近 。 这 种 写法 之 美 在 于 它 已 经 可 
以 支持 模块 了 。 模 块 是 可 重用 的 代码 段 ， 用 这 种 方法 可 以 实现 各 种 继承 ， 用 来 在 类 之 间 
共享 通用 的 属性 。 
var ORMModule = { 


save: function(){ 
// 共享 的 函数 


} 
}; 
var Person = new Class; 
var Asset = new Class; 


Person.include (ORMModule); 
Asset.include(ORMModule); 


我 们 之 前 已 经 提 到 过 prototype 属性 很 多 次 了 ， 但 还 没有 正 儿 八 经 地 解释 过 它 。 现 在 我 
们 来 详细 讲解 什么 是 原型 ， 以 及 如 何 用 它 来 实现 类 的 继承 。 





JavaScript 是 基于 原型 的 编程 语言 ， 原 型 用 来 区 别 类 和 实例 ， 这 里 提 到 一 个 概念 : 原型 
对 象 (prototypical object)。 原 型 是 一 个 “模板 ”对 象 ， 它 上 面 的 属性 被 用 做 初始 化 一 个 
新 对 象 。 任 何 对 象 都 可 以 作为 另 一 个 对 象 的 原型 对 象 ， 以 此 来 共享 属性 。 实 际 上 ， 可 以 
将 其 理解 为 某 种 形式 的 继承 。 


当 你 读 取 一 个 对 象 的 属性 时 ，JavaScript 首先 会 在 本 地 对 象 中 查找 这 个 属性 ， 如 果 没 有 
找到 ，JavaScript 开始 在 对 象 的 原型 中 查找 ， ee 卖 查 找 原 型 的 原型 ， 直 
到 查找 到 0bject.prototype。 如 果 找 到 这 个 属性 ， 则 返回 这 个 值 ， 否 则 返回 undefined。 
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换 句 话 说， 如 果 你 给 Array.prototype 添 加 了 属性 ， 那 么 所 有 的 JavaScript 数组 都 具有 
了 这 些 属性 。 
为 了 让 子 类 继承 父 类 的 属性 ， 首 先 需要 定义 一 个 构造 国 数 。 然 后 ， 你 需要 将 父 类 的 新 实 
例 赋值 给 构造 函数 的 原型 。 代 码 如 下 : 

var Animal = function(){}; 


Animal.prototype.breath = function(){ 
console.log('breath'); 
}; 


var Dog = function(){}; 


// Dog 继承 了 Animal 
Dog.prototype = new Animal; 


Dog.prototype.wag = function(){ 
console.log('wag tail'); 
}; 


现在 我 们 来 检查 一 下 继承 是 否 生 效 了 : 








var dog = new Dog 
dog .wag(); 
dog.breath(); // 继承 的 属性 


给 “类 ” 库 添 加 继承 
现在 来 给 我 们 自 定义 的 “类 ” 库 添加 继承 ， 我 们 通过 传人 一 个 可 选 的 父 类 来 创建 新 类 ; 








var CLass = function(parent){ 
var klass = function(){ 
this.init.apply(this, arguments); 
}; 


// 改变 klass 的 原型 

if (parent) { 
var subclass = function() { }; 
subclass.prototype = parent.prototype; 
klass.prototype = new subclass; 

}; 


klass.prototype.init = function(){}; 


// 定义 别名 
klass.fn = klass.prototype; 





给 类 
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klass.fn.parent = kLass; 
klass. Super = klass. proto ; 


/# include/extend 相关 的 代码 …… yh 


return klass; 
}; 
如 采 将 parent 传 入 Class 构造 函数 ， 那 么 所 有 的 子 类 则 必然 共享 同一 个 原型 。 这 种 创建 
临时 匿名 函数 的 小 技巧 避免 了 在 继承 类 的 时 候 创 建 实例 ， 这 里 暗示 了 只 有 实例 的 属性 才 
会 被 继承 ， 而 非 类 的 属性 。 设 置 对 象 的 ”proto ; 属性 并 不 是 所 有 浏览 器 都 支持 ， 类 似 
Super.js (http:/github.com/maccman/superjs) 的 类 库 则 通过 属性 复制 的 方式 来 解决 这 个 
问题 ， 而 非 通 过 固有 的 动态 继承 的 方式 来 实现 。 
现在 ,我 们 可 以 通过 给 Class 传 入 父 类 来 实现 简单 的 继承 : 
var Animal = new Class; 
AnimaL.incLude({ 
breath: function(){ 
console.log('breath'); 


} 
}); 


var Cat = new Class (Animal) 
// 用 法 


var tommy = new Cat; 
tommy .breath ( ); 


函数 调用 
在 JavaScript 中 ， 函 数 和 其 他 东西 一 样 都 是 对 象 。 然 而 ， 和 其 他 对 象 不 同 的 是 ， 函 数 是 
可 调用 的 。 国 数 内 上 下 文 ， 如 this 的 取 值 ， 取 决 于 调用 它 的 位 置 和 方法 。 


除了 使 用 方 括号 调用 函数 之 外 ， 还 有 其 他 两 种 方法 可 以 调用 函数 : apply() 和 call()。 
两 者 的 区 别 在 于 传 入 函数 的 参数 的 形式 。 


apply() 函数 有 两 个 参数 : 第 1 个 参数 是 上 下 文 ， 第 2 个 参数 是 参数 组 成 的 数组 。 如 果 
上 下 文 是 null， 则 使 用 全 局 对 象 代 殖 。 例 如 : 


function.apply(this, [1, 2, 3]) 


call() 函数 的 行为 和 apply() 函数 的 并 无 不 同 ， 只 是 使 用 方法 不 一 样 。call() 的 第 1 个 
参数 是 上 下 文 ， 后 续 是 实际 传人 的 参数 序列 。 换 名 话说 ， 这 里 使 用 多 参数 一 一 而 不 是 类 
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似 apply() 的 数组 一 一 来 将 参数 传 入 函数 。 
function.call(this, 1, 2, 3); 


为 什么 要 更 换 上 下 文 ? 这 的 确 是 一 个 问题 ， 因 为 其 他 编程 语言 不 允许 手动 更 换 上 下 文 也 
没什么 不 好 。JavaScript 中 人 允许 更 换 上 下 文 是 为 了 共享 状态 ， 尤 其 是 在 事件 回调 中 。( 依 
个 人 所 见 ， 这 是 语言 设计 中 的 一 个 错误 ， 因 为 这 会 对 初学 者 造成 一 些 困扰 ， 并 引入 一 些 
bug。 但 亡羊补牢 为 时 已 晚 ， 你 需要 花 精 力 来 和 弄 清 楚 它们 是 如 何 工作 的 。) 


jQuery 在 其 API 的 实现 中 就 利用 了 apply() 和 call() 来 更 改 上 下 文 ， 比 如 在 事件 处 理 
程序 中 或 者 使 用 each() 来 做 迭代 时 。 起 初 这 很 让 人 费解 ， 一 旦 你 理解 了 就 会 发 现 它 非常 
有 用 : 


$('.clicky').click(function(){ 
// “this” 指 向 当前 节点 
$(this).hide(); 

}); 


$('p').each(function(){ 
//“this” 指 向 本 次 迭代 
$(this).removel(); 

}); 


为 了 访问 原始 上 下 文 , 可 以 将 this 的 值 存 入 一 个 局 部 变量 中 ,这 是 一 种 常见 的 模式 ,比如 : 


var clicky = { 
wasClicked: function(){ 
J si 
}, 


addListeners: function(){ 
var self = this; 
$('.clicky').click(function(){ 
self.wasClicked() 
}); 
} 
}; 


clicky.addListeners(); 


然而 ， 我 们 可 以 使 用 apply 来 将 这 段 代码 变 得 更 干净 一 些 ， 通 过 将 回调 包装 在 另外 一 个 
匿名 函数 中 ， 来 保持 原始 的 上 下 文 : 


var proxy = function(func, thisObject)t{ 
return(function(){ 
return func.apply(thisObject, arguments); 
}); 
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}; 


var clicky = { 
wasClicked: function(){ 
7 ni */ 
}, 


addListeners: function(){ 
var self = this; 
$('.clicky').click(proxy(this.wasClicked, this)); 
} 
}; 
因此 在 上 面 的 例子 中 ， 我 们 在 点 击 事件 的 回调 中 指定 了 要 使 用 的 上 下 文 ; jQuery 中 调用 
这 个 函数 所 用 的 上 下 文 就 可 以 忽略 了 。 实 际 上 ，jQuery 也 包含 了 实现 这 个 功能 的 API， 
你 或 许 已 经 猜 到 了 ， 就 是 jQuery .proxy(): 





$('.clicky').click($.proxy(function(){ /* ... */ }, this)); 


使 用 apply() 和 call() 还 有 其 他 很 有 用 的 原因 ， 比 如 “委托 ”。 我 们 可 以 将 一 个 调用 委 
托 给 另 一 个 调用 ， 其 至 可 以 修改 传 入 的 参数 : 
var App { 


log: function(){ 
if (typeof console == "undefined") return; 


// 将 参数 转换 为 合适 的 数组 
var args = jQuery .makeArray(arguments ) ; 


// 插入 一 个 新 的 参数 
args.unshift("(App)"); 


// 委托 给 console 
console.log.apply(console, args); 
} 
js 
在 这 个 例子 中 首先 构建 了 一 个 参数 数组 ， 然 后 将 我 们 自己 的 参数 添加 进去 ， 最 后 将 这 个 
调用 委托 给 了 console.1l0g()。 你 可 能 对 arguments 变量 不 熟悉 ， 它 是 当前 调用 的 作用 
域内 解释 器 内 置 的 用 来 保存 参数 的 数组 。 但 它 并 不 是 真正 的 数组 ， 比 如 它 是 不 可 变 的 ， 
因此 我 们 需要 通过 jquery .makeArray() 将 其 转换 为 可 用 的 数组 。 





14 | 第 { 章 MVC 和 类 


控制 “类 ” 库 的 作用 域 


上 文 提 到 的 proxy 函数 是 一 个 非常 有 用 的 模式 ， 我 们 应 当 将 其 添加 至 我 们 的 “类 ” 库 中 。 
我 们 在 类 和 实例 中 都 添加 proxy 函数 ， 这 样 就 可 以 在 事件 处 理 程 序 之 外 处 理 函 数 的 时 候 
和 下 面 这 段 代码 所 示 的 场景 中 保持 类 的 作用 域 : 


var Class = function(parent)t{ 
var klass = function(){ 
this.init.apply(this, arguments); 
}; 
klass.prototype.init = function(){}; 
klass.fn = klass.prototype; 


// 添加 一 个 proxy 函数 
klass.proxy = function(func){ 
var self = this; 
return(function(){ 
return func.apply(self, arguments); 
}); 
} 











// 在 实例 中 也 添加 这 个 函数 
klass.fn.proxy = klass.proxy; 





return klass; 
}; 


现在 我 们 可 以 使 用 proxy() 函数 来 包装 函数 ， 以 确保 它们 在 正确 的 作用 域 中 被 调用 : 
var Button = new Class,; 


Button.includel({ 
init: function(element){ 
this.element = jQuery (element); 


// 代理 了 这 个 click 函数 
this.element.click(this.proxy(this.click)); 
}, 


click: function(){ /* ... */ } 
}); 
如 果 我 们 没有 使 用 proxy 将 click() 的 回调 包装 起 来 ， 它 就 会 基于 上 下 文 this.eLement 
来 调用 ， 而 不 是 Button， 这 会 造成 各 种 问题 。 在 新 版 本 的 JavaScript 一 一 ECMAScript 5 
(ES5 ) 中 同样 加 入 了 bind() 函数 用 以 控制 调用 的 作用 域 。bind() 是 基于 函数 进行 调用 的 ， 
用 来 确保 函数 是 在 指定 的 this 值 所 在 的 上 下 文中 调用 的 。 例 如 : 
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Button.includel({ 
init: function(element){ 
this.element = jQuery (element); 


// 绑 定 这 个 click 函数 
this.element,.click(this.click,.bind(this)); 
}, 


click: function(){ /* ... */ } 
}); 


这 个 例子 和 我 们 的 proxy() 函数 是 等 价 的 ， 它 能 确保 click() 函数 基于 正确 的 上 下 文 进 
行 调用 。 但 老 版 本 的 浏览 器 不 支持 bind()， 幸 运 的 是 ， 如 果 需 要 则 可 以 手动 实现 它 。 对 
于 老 版 本 的 浏览 器 来 说 , 手动 实现 的 bind() 兼容 性 也 不 错 , 可 直接 扩展 相关 对 象 的 原型 ， 
这 样 就 可 以 像 今天 在 ES5 中 使 用 bind ( ) 那样 在 任意 浏览 器 中 调用 它 。 例 如 ， 下 面 就 是 
一 段 实现 了 bind() 函数 的 代码 : 


if (!Function.prototype.bind) { 
Function.prototype.bind = function (obj) { 
var slice = [].slice, 

args = slice.call(arguments, 1), 

self = this, 

nop = function () {}, 

bound = function () { 

return self.apply( this instanceof nop ? this : (obj || 让 }), 
args.concat(slice.call(arguments))); 


}; 
nop.prototype = self.prototype; 
bound.prototype = new nop(); 


return bound; 
}; 
} 


如 果 浏 览 器 原生 不 支持 bind()， 我 们 仅 须 重 写 Function 的 原型 。 现 代 浏 览 器 则 可 以 继 
续 使 用 内 置 的 实现 。 对 于 数组 来 说 这 种 “ 打 补丁 ”2 式 的 做 法 非常 有 用 , 因为 在 新 版 本 
的 JavaScript 中 ， 数 组 增加 了 很 多 新 的 特性 。 我 个 人 推荐 使 用 es5-shim (https://github. 


com/kriskowal/es5-shim) 项 目 ， 因 为 它 涵盖 了 ES5 中 新 增 的 尽 可 能 多 的 特性 。 











译注 2: 原文 为 Shimnming， 意 指 “ 补 偿 ”。 
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添加 私有 函数 


迄今 为 止 ， 我们 为 “类 ” 库 添加 的 属性 都 是 “公开 的 "， 可 以 被 随时 修改 。 现 在 我 们 来 
探究 一 下 如 何 给 “类 ”添加 私有 属性 。 





很 多 开发 者 都 习惯 在 私有 属性 之 前 冠 以 下 夯 线 前 级 (_)。 尽 管 本 质 上 这 并 不 是 私有 属性 ， 
但 至 少 能 一 眼看 出 它们 就 是 私有 属性 ， 因 此 它 是 私有 API 的 组 成 部 分 。 我 尽 可 能 地 不 考 
虑 这 种 情况 ， 因 为 它 看 上 去 实在 太 丑 陋 了 。 


JavaScript 的 确 支 持 不 可 变 属 性 ， 然 而 在 主流 浏览 器 中 并 未 实现 ， 我 们 还 没 办 法 直接 利 
用 这 个 特性 。 相 反 ， 我 们 可 以 利用 JavaScript 匿名 函数 来 创建 私有 作用 域 ， 这 些 私 有 作 
用 域 只 能 在 内 部 访问 : 
var Person = function(){}; 
(function(){ 
var fndById = function(){ /* ... */ }; 
Person .find = function(id){ 
if (typeof id == "integer") 
return findById(id); 
}; 
}) () ; 
我 们 将 类 的 属性 都 包装 进 一 个 匿名 函数 中 ， 然 后 创建 了 局 部 变量 〈findById) ， 这 些 局 部 
变量 只 能 在 当前 作用 域 中 被 访问 到 。Person 变量 是 在 全 局 作用 域 中 定义 的 ， 因 此 可 以 在 
任何 地 方 都 能 访问 到 。 


变量 的 时 候 不 要 丢掉 var 运算 符 ， 因 为 如 果 丢 掉 var 就 会 创建 全 局 变量 。 如 果 你 需 
在 全 局 作用 域 中 定义 它 或 者 定义 为 window 的 属性 : 





(function(exports){ 
var foo = "bar"; 


// 将 变量 暴露 出 去 
exports.foo = foo; 


}) (window); 


assertEqual (foo, "bar"); 
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[LT > 


类 库 
为 了 便于 理解 本 书 中 的 很 多 概念 ， 最 好 先 理解 “类 ”的 一 些 基础 理论 ， 但 实际 上 开发 人 
员 往 往 是 直接 就 去 使 用 一 个 “类 ” 库 。jQuery 本 身 并 不 支持 类 ， 但 通过 插件 的 方式 可 以 
轻易 引入 类 的 支持 ， 比 如 HJS (http:/plugins.jquery.com/project/HJS)。HJS 允许 你 通过 
给 $.Class.create 传 人 一 组 属性 来 定义 类 : 





var Person = $.Class.create({ 
// 构造 国 数 
initialize: function(name) { 
this.name = name; 
} 
}); 


可 以 在 创建 类 的 时 候 传 入 父 类 作为 参数 ， 这 样 就 实现 了 类 的 继承 : 


var Student = $.Class.create(Person, { 
price: function() { /* ... */ } 
}); 


var alex = new Student("Alex"); 
alex.pay(); 


可 以 直接 给 类 挂 载 属性 : 
Person.find = function(id){ /* ... */ }; 
HJS 的 API 中 同样 包含 一 些 工具 函数 ， 比 如 clone() 和 equal(): 


new Student ("Alex"); 
alex.clone(); 


var alex 
var bill 


assert( alex.equal(bill) ); 


HJS 并 不 是 我 们 的 唯一 选择 ，Spine (http:/maccman.github.com/spine) 同样 实现 了 类 ， 
通过 直接 在 页 面 中 引入 spine.js (http:/maccman.github.com/spine/spine.js) 来 使 用 它 : 


<script src="http://maccman.github.com/spine/spine.js"> </script> 
<script> 
var Person = Spine.CLass,create() ; 


Person.extend({ 
find: function() { /* ... */ } 
}); 


Person.incLude({ 
init: function(atts){ 
this.attributes = atts || {}; 
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} 
}); 


var person = Person.init(); 
</script> 


Spine“ 类 ” 库 的 API 和 我 们 本 章 所 构建 的 “类 ” 库 API 非常 类 似 。 使 用 extend() 来 添 
加 类 属性 并 使 用 incLude() 来 添加 实例 属性 。 通 过 给 Spine.CLass 实例 传 入 父 类 来 实现 


如 果 你 不 想 把 视野 局 限于 jQuery 的 话 ， 那 就 多 关注 一 下 Prototype (http://prototypejs. 

ore/) ， 它 包含 很 多 不 错 的 API (http:/prototypejs.org/learn/class-inheritance)， 并 且 是 其 

他 很 多 类 库 的 灵感 来 源 。 

jQuery 的 作者 John Resig 在 他 的 博客 中 写 过 一 篇 文章 ， 专 门 讲解 如 何 实现 经 典 的 类 继承 
(http://goo.g1/0910V)， 这 篇 文章 也 值得 一 读 ， 尤 其 是 当 你 想 挖掘 JavaScript 原型 系统 背 

后 的 真相 的 时 候 。 





吧 
贡 
© 
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事件 和 点 听 








事件 是 JavaScript 应 用 程序 的 核心 ， 是 所 有 内 容 的 驱动 ， 它 决定 了 在 应 用 程序 产生 用 户 
交互 的 起 始 时 刻 。 然 而 在 JavaScript 诞生 之 初 “ 事 件 ” 的 实现 并 不 标准 ， 其 至 非常 丑陋 。 
在 之 后 的 浏览 器 大 成 中 网 景 和 微软 分 道 扬 镀 ， 它 们 各 自 实现 的 事件 模型 互 不 兼容 。 尽 管 
后 来 W3C 对 此 做 了 标准 化 ,但 IE 仍然 坚持 使 用 与 W3C 不 兼容 的 事件 模型 ， 直 到 最 新 
发 布 的 IE9 才 遵 循 标准 。 


幸运 的 是 ， 有 很 多 诸如 jQuery 和 Prototype 的 类 库 很 好 地 处 理 了 兼容 性 问题 ， 对 外 提供 
了 统一 的 API 来 实现 事件 。 但 是 了 解 事件 的 机 制 仍然 是 非常 重要 的 ， 因 此 这 里 首先 讲解 
W3C 中 的 事件 模型 ， 然 后 展示 各 种 流行 类 库 的 一 些 实例 。 


监听 事件 


绑 定 事件 监听 的 函数 叫做 addEventListener()， 它 有 3 个 参数 : type (比如 click)、 
Listener (比如 callback) 及 useCapture (后 续 会 讲 到 useCapture)。 使 用 前 两 个 参数 
可 以 给 一 个 DOM 元 素 绑 定 一 个 函数 , 当 特 定 的 事件 (比如 点 击 ) 被 触发 时 执行 这 个 函数 : 


var button = document.getElementById("createButton"); 
button.addEventListener("click", function(){ /* ... */ }, false); 


可 以 使 用 removeEventListener() 来 移 除 事件 监听 ， 参 数 和 传人 addEventListener() 的 
一 样 。 如 果 监 听 的 函数 是 匿名 函数 ， 没 有 任何 引用 指向 它 ， 在 不 销毁 这 个 元 素 的 前 提 下 ， 
这 个 监听 是 无 法 被 移 除 的 : 


var div = document.getElementById("div"); 


var Listener = function(event) { /* ... */ }; 
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div.addEventListener("click", listener, false); 
div.removeEventListener("click", listener, false); 


L200 > 带 入 listener 函数 的 第 1 个 参数 是 event 对 象 ,通过 event 对 象 可 以 得 到 事件 的 相关 信息 ， 
比如 时 间 戳 、 坐 标 和 事件 宿主 元 素 (target) 。 它 同样 包含 很 多 方法 来 停止 事件 冒 泡 和 阻 
止 事件 的 默认 行为 。 


不 同 的 浏览 器 对 事件 类 型 的 支持 也 不 尽 相 同 ， 但 所 有 现代 浏览 器 都 支持 这 些 事件 : 


®。° click 

。° dblclick 

®。 mousemove 

。 mouseover 

。 mouseout 

®。 focus 

®° Dblur 

。 change (表单 输入 框 特有 ) 
。 submit (表单 特有 ) 


可 以 从 PPK 的 文章 中 (http://goo.g117Zqk) 查看 怪异 模式 支持 的 事件 类 型 。 


事件 顺序 


在 进一步 讨论 之 前 ,很 有 必要 介绍 一 下 事件 顺序 。 如 果 一 个 节点 和 它 的 一 个 父 市 点 都 绑 
定 了 相同 事件 类 型 的 回调 ， 当 事件 触发 时 哪个 回调 会 先 执行 ? 尽管 网 景 和 微软 的 处 理 方 
式 不 一 致 ， 也 不 要 太 过 担心 。 


Netscape 4 支持 事件 捕捉 (capturing)， 从 顶层 的 父 节 点 开始 触发 事件 ， 从 外 到 内 传播 。 


微软 则 支持 事件 冒 泡 (bubbling) ,从 最 内 层 的 市 点 开始 触发 事件 , 逐 级 冒 泡 直到 顶层 节 
从 内 向 外 传播 。 


我 认为 事件 冒 泡 看 起 来 更 合理 一 些 ， 这 也 是 我 们 日 常 开 发 所 用 的 事件 模型 。W3C 对 此 做 
了 让 步 ， 将 对 这 两 种 事件 模型 的 支持 都 加 入 标准 规范 之 中 。 根 据 W3C 模型 ,事件 首先 
被 目标 元 素 所 捕 抱 ， 然 后 向 上 冒 泡 。 


你 可 以 自行 选择 要 注册 的 事件 处 理 程序 的 调用 类 型 ， 捕 捉 或 冒 泡 ， 通 过 给 addEvent- 
Listener() 传人 第 3 个 参数 useCapture 来 设置 。 如 果 addEventListener() 的 最 后 一 
个 参数 是 true， 事 件 处 理 程序 以 捕捉 模式 触发 ; 如 果 是 faLse， 事 件 处 理 程序 以 冒 泡 模 
式 触 发 : 
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// 给 最 后 一 个 参数 传 入 false， 来 设置 事件 冒 泡 

button.addEventListener("click", function(){ /* ... */ }, false); 
大 多 数 情况 下 我 们 都 在 使 用 冒 泡 模式 ， 如 果 对 此 不 太 确 定 ， 可 以 给 addEventListener() 
的 最 后 一 个 参数 传人 false。 


取消 事件 
当 事 件 冒 泡 时 ， 可 以 通过 stopPropagation() 函数 来 终止 冒 泡 ， 这 个 函数 是 event 对 象 
中 的 方法 。 比 如 这 上段 代码 ， 任 何 父 市 点 的 事件 回调 都 不 会 触发 : 
button.addEventListener("click", function(e){ 
e.stopPropagation(); 
J sa Fy 
}, false); 
此 外 ,一些 类 库 比 如 jQuery 还 支持 stopImmediatePropagation() 函数 ， 用 来 阻止 后 续 
所 有 的 事件 触发 一 一 哪怕 这 些 事件 是 注册 在 同一 个 布点 元 素 上 的 也 不 例外 。 





浏 览 器 同样 给 事件 赋予 了 默认 行为 。 比 如 ， 当 你 点 击 一 个 链接 时 ， 神 览 器 的 默认 行为 是 
载 入 新 页 面 , 当 点 击 一 个 复 选 框 时 ,和 浏 览 器 会 将 其 选中 (或 取消 选中 )。 在 事件 传播 阶段 (之 
后 ) 会 触发 这 些 默 认 行为 ， 在 任何 一 个 事件 处 理 程序 中 都 可 以 阻止 默认 行为 。 可 以 通过 
调用 event 对 象 的 preventDefault() 国 数 来 阻止 默认 行为 ， 同 样 也 可 以 通过 在 回调 中 和 返 
回 faLse 来 实现 同样 的 效果 : 
bform.addEventListener("submit"，function(e){ 
/* ss */ 
return confirm("Are you super sure?"); 
}, false); 
如 果 调 用 confirm() 返回 包 lse (用 户 点 击 了 对 话 框 的 取消 按钮 ), 这 个 事件 回调 函数 就 返 
回 false， 这 样 就 会 取消 事件 ， 阻 止 表单 的 提交 ，。 


事件 对 象 

和 上 面 提 到 的 函数 stopPropagation() 和 preventDefault() 一 样 ，event 对 象 还 包含 很 
多 有 用 的 属性 。W3C 规范 中 包含 的 大 部 分 属性 都 列 在 下 面 ， 更 多 信息 请 参照 完整 的 标准 
规范 (htip:/www.w3.org/TR/DOM-Level-2-Events/)。 





事件 类 型 : 


pubbles 
布尔 值 ， 表 示 事 件 是 否 通过 DOM 以 冒 泡 形式 触发 。 
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[ 2 > 事件 发 生 时 ， 反 映 当前 环境 信息 的 属性 : 


button 
表示 (如果 有 ) 鼠标 所 按 下 的 按钮 。 


CtrLKey 
布尔 值 ， 表 示 Ctrl 键 是 否 按 下 。 


altkey 
布尔 值 ， 表 示 Alt 键 是 否 按 下 。 


shiftkey 
布尔 值 ， 表 示 Shift 键 是 否 按 下 。 





metakey 

布尔 值 ， 表 示 Meta 键 ”…' 是 否 按 下 。 
表示 键盘 事件 的 属性 : 
isChar 


布尔 值 ， 表 示 当 前 按 下 的 键 是 否 表示 一 个 字符 。 





charCode 


表示 当前 按键 的 unicode 值 〈 仅 对 keypress 事件 有 效 )。 


keyCode 
表示 非 字 符 按键 的 unicode 值 。 


which 


表示 当前 按键 的 unicode 值 ， 不 管 当前 按键 是 否 表示 一 个 字符 。 
事件 发 生 时 的 环境 参数 : 


pageX, pageY 
事件 发 生 时 相对 于 页 面 (如 viewport 区 域 ) 的 坐标 。 


screenX, screenY 


事件 发 生 时 相对 于 屏幕 的 坐标 。 





译注 1: ”Meta 键 是 以 前 MIT 计 算 机 键盘 上 的 一 个 特殊 键 , 一般 的 电脑 键盘 没有 这 个 键 ， 类 似 Ctrl 和 Alt 的 功 


如 已 
月 已 o 
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和 事件 相关 的 元 素 : 


currentTarget 


事件 冒 泡 阶 段 所 在 的 当前 DOM 元 素 。 


target ,originalTarget 
原始 的 DOM 元 素 。 


relatedTarget 

其 他 和 事件 相关 的 DOM 元 素 (如 果 有 的 话 )。 
不 同 的 浏览 器 对 这 些 属性 的 兼容 性 也 不 同 ,尤其 是 那些 不 兼容 W3C 的 浏览 器 。 幸 运 的 是 ， 
诸如 jQuery 和 Prototype 这 些 类 库 为 我 们 解决 了 这 些 兼 容 性 问题 。 


事件 库 


很 多 时 候 我 们 仅仅 是 将 JavaScript 类 库 用 于 事件 管理 ， 毕 竞 手动 处 理 众多 浏览 器 的 差异 
性 吃力 不 讨好 。 现 在 我 为 大 家 介绍 如 何 使 用 jQuery 的 API 来 做 事件 管理 ， 当 然 使 用 其 他 
的 类 库 也 是 不 错 的 选择 , 比如 Prototype (htip:/wwwprototypejs.org/)、MooTools (http:// 
mootools.net/) 和 YUI (http://developeryahoo.com/yui)。 可 以 参照 更 多 更 深入 的 文档 来 
获取 它们 各 自 的 API 信息 。 


jQuery 的 API 提供 了 bind() 函数 用 来 跨 浏览 器 绑 定 事 件 监听 。 在 一 个 jQuery 实例 上 调 
用 此 函数 ， 传 入 事件 名 称 和 回调 函数 : 


jQuery("#element").bind(eventName, handler); 
比如 ， 给 一 个 元 素 注 册 点 击 事件 : 


jQuery("#element").bind("click", function(event) { 
A 
}); 


jQuery 提供 了 一 些 常用 事件 的 快捷 方法 ， 比 如 click、submit 和 mouseover。 看 这 段 代码 : 


$("#myDiv").click(function(){ 
JL 
}); 


需要 注意 的 是 ， 使 用 这 个 方法 之 前 要 确保 DOM 元 素 是 存在 的 ， 这 一 点 很 重要 。 例 如 ， 
应 当 在 页 面 载 入 完成 后 绑 定 事 件 ， 因 此 需要 绑 定 window 的 load 事件 ， 然 后 添加 监听 : 
jQuery(window) .bind("Load"，function() { 


$("#signinForm").submit(checkForm); 
}); 





事件 库 | 25 


然而 ， 还 有 一 个 比 监 听 window 的 1oaq 事件 更 好 的 方法 ， 妈 DOMContentLoaded。 当 
DOM 构建 完成 时 触发 这 个 事件 ， 这 时 图 片 和 样式 表 可 能 还 未 加 载 完 毕 。 这 也 就 是 说 这 
个 事件 一 定 会 在 用 户 和 页 面 产 生 交 互 之 前 触发 。 











并 不 是 所 有 的 浏览 器 都 支持 DOMContentLoaded, 因此 jQuery 将 它 融 入 了 ready() 函数 ， 
这 个 函数 是 兼容 各 个 浏览 器 的 : 
jQuery.ready (function($))t 


$("#myForm"). bind("submit", function(){ /*...*/}); 
}); 


实际 上 ， 可 以 不 用 ready() 函数 而 直接 将 回调 函数 写 入 jQuery 对 象 。 





jQuery (function($){ 
// 当 页 面 内 容 可 用 时 调用 
}); 


切换 上 下 文 


关于 事件 有 一 点 经 常 让 人 感到 迷惑 ， 那 就 是 调用 事件 回调 函数 时 上 下 文 的 切换 。 当 使 用 
浏览 器 内 置 的 addEventListener() 时 ， 上 下 文 从 局 部 变量 切换 为 目标 HTML 元 素 : 














new function(){ 
this.appName = "wem"; 


document .body.addEventListener("click", function(e){ 
// 上 下 文 发 生 改变 ， 因 此 appName 是 undefined 
alert(this.appName); 
}, false); 
}; 
要 想 保 持原 有 的 上 下 文 ， 需要 将 回调 函数 包装 进 一 个 匿名 函数 ， 然 后 定义 一 个 引用 指 
向 它 。 我 们 在 第 1 章 已 经 提 到 这 种 模式 ， 即 使 用 代理 函数 来 保持 当前 的 上 下 文 。 这 在 
jQuery 中 也 是 一 种 很 常用 的 模式 ， 包 括 一 个 proxy() 函数 ， 只 需 将 指定 的 上 下 文 传 和 信函 
数 即 可 : 


$("signinForm").submit($.proxy(function(){ /* ... */ }, this)); 


委托 事件 


从 事件 冒 泡 时 开始 就 发 生 了 事件 委托 ， 我 们 可 以 直接 给 父 元 素 绑 定 事件 监 昕 ， 用 来 检测 
在 其 子 元 素 内 发 生 的 事件 。 这 也 是 类 似 SproutCore (http:/wwwsproutcore.com/) 这 种 框 
架 所 使 用 的 技术 ， 用 来 减少 应 用 中 的 事件 监听 的 数量 : 
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// 在 Ul 列表 上 做 了 事件 委托 
list.addEventListener("click", function(e){ 
if (e.currentTarget.tagName == "li") { 

/J it 
return false; 


} 
}, false); 
jQuery 的 处 理 方式 更 妙 ， 只 需 给 delegate() 函数 传人 子 元 素 的 选择 器 、 事 件 类 型 和 回 
调 函 数 即 可 。 如 果 使 用 事件 绑 定 的 话 ， 就 会 给 每 一 个 Li 元 素 都 绑 定 click 事件 ， 然 而 使 
用 delegate() 方法 就 能 减少 这 种 事件 监听 的 数量 ， 改 善 代 码 性 能 : 


// 不 要 这 样 做 ， 这 样 会 给 每 个 Li 元 素 都 添加 事件 监听 (非常 浪费 ) 
$("UL Li"),cCLick(function(){ /* ... */ }); 


// 这 样 只 会 添加 一 个 事件 监听 
$("ul").delegate("li", "click", /* ... */); 


使 用 事件 委托 的 另 一 个 好 处 是 ， 所 有 为 元 素 动 态 添 加 的 子 元 素 都 具有 事件 监听 。 因 此 ， 
在 上 面 的 例子 中 ， 在 页 面 载 入 完成 后 添加 的 ti 市 点 同样 可 以 触发 点 击 事件 的 回调 。 


I 一 :一 从 
自 定 义 事件 
除了 浏览 器 内 署 的 事件 之 外 ， 我 们 也 可 以 触发 和 绑 定 自 定 义 事件 。 实 际 上 ， 这 是 架构 库 


的 一 个 好 方法 一 一 也 是 jQuery 的 大 多 数 插件 所 使 用 的 模式 。 大 多 数 浏览 器 厂商 均 未 实现 
W3C 标准 中 的 自 定义 事件 ， 可 以 使 用 诸如 jQuery 或 Prototype 的 类 库 来 使 用 这 个 特性 





jQuery 中 可 以 使 用 trigger() ee 可 以 通过 命名 空间 的 形式 来 管理 
事件 名 称 ， 命 名 空间 中 的 单词 用 点 号 分 隔 汪 ”"， 比 如 : 





// 绑 定 自 定 义 事件 
$(".class").bind("refresh.widget",function(){}); 





// 触发 自 定义 事件 
$(".class").trigger("refresh.widget"); 


通过 给 trigger() 传人 一 个 额外 的 参数 来 给 事件 处 理 程序 传 和 数据。 数据 会 以 附加 参数 
的 形式 带 入 回 调 : 


$(".class").bind("frob.widget", function(event, dataNumber){ 
console.log(dataNumber); 





}); 
译注 2: ”用 点 号 分 隔 只 是 一 种 约定 ， 并 无 特殊 含义 ， 点 号 在 jQuery 中 比较 常用 ， 而 在 YUI 中 自 定义 事件 名 
称 通常 使 用 冒号 分 隔 ， 比 如 ddmi:start。 





自 定 义 事件 | 27 


$(".class").trigger("frob.widget", 5); 
和 内 置 事件 一 样 ， 自 定义 事件 同样 会 沿 着 DOM 树 做 冒 泡 。 


自 定义 事件 和 jQuery 插件 


jQuery 插件 的 实现 深 受 自 定 义 事件 机 制 的 影响 ， 同 样 ， 自 定义 事件 也 是 处 理 与 DOM 产 
生 交 互 的 代码 逻辑 片段 之 间 耦 合 的 很 好 的 架构 方法 。 如 果 你 对 jQuery 插件 不 其 了 解 ， 请 
移 步 附录 B， 附 录 B 中 更 深入 地 讲解 了 jQuery。 





当 你 想 给 你 的 应 用 添加 一 个 功能 片段 时 ， 或 许 经 常 纠结 于 是 否 应 当 将 这 个 片段 抽 离 为 一 
个 播 件 。 自 定义 事件 的 思路 可 以 帮 你 做 这 种 解 耦 ， 并 逐 新 形成 一 个 可 复 用 的 库 。 





比如 ， 我 们 来 看 一 个 简单 的 jQuery 插件 一 一 选项 卡 。 我 们 让 ul 列表 来 响应 点 击 事件 。 
当 用 户 点 击 一 个 列表 项 ， 给 这 个 列表 项 添加 一 个 名 为 active 的 类 ， 同 时 将 其 他 列表 项 中 
的 active 类 移 除 : 
<UL id="tabs"> 
<li data-tab="users">Users</li> 


<li data-tab="groups">Groups</\i> 
</UL> 


<div id="tabsContent"> 


<div data-tab="users"> ... </div> 
<div data-tab="groups"> ... </div> 
</div> 


另外 ，id 为 tabsContent 的 div 用 来 存放 每 个 选项 卡 对 应 的 实际 内 容 。 根 据 当 前 激活 的 
选项 卡 ， 来 对 应 地 给 div 的 子 节点 添加 或 删除 active 类 。 实 际 的 显示 和 隐藏 选项 卡 和 内 
容 都 由 CSS 来 控制 ， 我 们 的 插件 仅仅 处 理 active 类 : 


jQuery .fn.tabs = function(control)t{ 
var element = $(this); 
control = $(control); 


element.find("li").bind("click", function(){ 
// 从 列表 项 中 添加 或 删除 active 类 
element.find("li").removeClass("active"); 
$(this).addClass("active"); 


// 给 tabContent 添加 或 删除 active 类 

var tabName = $(this).attr("data-tab"); 

control.find(">[data-tab]").removeClass("active"); 

control.find(">[data-tab='" + tabName + "']").addClass("active"); 
}); 
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}; 


// 激活 第 1 个 选项 卡 
element .find ("tli:first").addClass("active"); 


// 返回 this 以 启用 链 式 调用 
return this; 





插件 位 于 jQuery 的 prototype 里 ， 因 此 可 以 基于 jQuery 实例 来 调用 : 


$( 


"ul#tabs").tabs("#tabContent"); 


现在 看 上 去 插件 有 什么 问题 吗 ? 没 错 ， 我 们 给 所 有 的 列表 项 都 添加 了 click 事件 回调 ， 这 
是 第 1 个 错误 。 我 们 可 以 使 用 上 文 提 到 的 delegate() 来 优化 代码 。 同 样 ， 点 击 事件 回调 
的 实现 很 腔 肿 ， 很 难 一 眼看 出 发 生 了 什么 。 除 此 之 外 ， 如 果 另 一 个 开发 者 想 要 扩展 这 个 


插件 ， 


他 很 可 能 会 将 其 重 写 。 


我 们 来 看 下 如 何 使 用 自 定义 事件 让 代码 变 得 更 整洁 。 在 点 击 选 项 卡 时 触发 一 个 change. 
tabs 事件 ， 并 绑 定 若干 回调 方法 来 适当 修改 active 类 : 


jQuery.fn.tabs = function (control) { 


}; 


Var element = $(this); 
control = $(control); 


element.delegate("li", "click", function () { 
// 遍历 选项 卡 名 称 
var tabName = $(this).attr("data-tab"); 


// 在 点 击 选项 卡 时 触发 自 定 义 事件 
element.trigger("change.tabs", tabName); 


}); 








// 绑 定 到 自 定义 事件 

element.bind("change.tabs", function (e, tabName) { 
element.find("li").removeClass("active"); 
element.find(">[data-tab='" + tabName + "']").addClass("active"); 


}); 


element.bind("change.tabs", function (e, tabName) { 

control .find(">[data-tab]").removeClass("active"); 

control .find(">[data-tab='" + tabName + "']").addClass("active"); 
}); 
// 激活 第 1 个 选项 卡 
var firstName = element .find("li:first").attr("data-tab"); 
element.trigger("change.tabs", firstName); 


return this; 
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我 们 看 到 使 用 自 定义 事件 回调 可 以 让 代码 更 加 整洁 。 这 也 意味 着 选项 卡 状态 切换 回调 彼 
此 分 离 ， 这 也 让 插件 代码 更 具 扩 展 性 。 比 如 我 们 可 以 在 程序 中 直接 更 改选 项 卡 的 状态 ， 
只 需 触发 被 观察 列表 的 change.tabs 事件 即 可 : 


$("#tabs").trigger("change.tabs", "users"); 


同样 ， 我 们 可 以 将 切换 选项 卡 的 动作 和 窗口 的 hash 做 关联 ， 这 样 就 可 以 使 用 浏览 器 的 后 
退 按钮 了 : 
$("#tabs").bind("change.tabs", function(e, tabName){ 


window. Location.hash = tabName; 
}); 


$(window) .bind("hashchange", function(){ 

var tabName = window.location.hash. slice(1); 
$("#tabs").trigger("change.tabs", tabName); 
}); 


自 定义 事件 的 运用 实际 上 给 其 他 开发 者 很 大 的 空间 来 扩展 我 们 的 工作 成 果 。 


DOM 无 关 事 件 


基于 事件 的 编程 非常 强大 ， 因 为 它 能 让 你 的 应 用 架构 充分 解 厢 ， 让 功能 变 得 更 加 内 察 
且 具 有 更 好 的 可 维护 性 。 事 件 本 质 上 是 和 DOM 无 关 的 ， 因 此 你 可 以 很 容易 地 开发 出 
一 个 事件 驱动 的 库 。 这 种 模式 称 为 发 布 / 订 阅 (http://en.wikipedia.org/wiki/Publish/ 
subscribe)， 这 是 一 个 很 有 用 的 模式 。 





发 布 / 订 阅 (Pub/Sub) 是 一 种 消息 模式 ， 它 有 两 个 参与 者 : 发 布 者 和 订阅 者 。 发 布 者 向 
某 个 信道 (channel) 发 布 一 条 消息 ， 订 阅 者 绑 定 这 个 信道 ， 当 有 消息 发 布 至 信道 时 就 会 
接收 到 一 个 通知 。 最 重要 的 一 点 是 ， 发 布 者 和 订阅 者 是 完全 解 耦 的 ， 彼 此 并 不 知晓 对 方 
的 存在 。 两 者 仅仅 共享 一 个 信道 名 称 。 








发 布 者 和 订阅 者 的 解 耦 可 以 让 你 的 应 用 易于 扩展 ， 而 不 必 引 入 额外 的 交叉 依赖 和 耦合 ， 
从 而 提高 了 应 用 的 可 维护 性 ， 添 加 额外 功能 也 非常 容易 。 





那么 ， 应 当 如 何在 应 用 中 使 用 发 布 /订阅 (Pub/Sub) 模式 呢 ? 你 只 需 记 录 回 调和 事件 名 
称 的 对 应 关系 及 调用 它们 的 方法 。 看 一 下 这 个 例子 ， 这 段 代 码 中 实现 了 PubSub 对 象 ， 用 
它 可 以 添加 并 触发 事件 监听 : 
var PubSub = { 
subscribe: function(ev, callback) { 


// 创建 _callbacks 对 象 ， 除 非 它 已 经 存在 了 
var calls = this. callbacks || (this. callbacks = {}); 
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// 针对 给 定 的 事件 key 创建 一 个 数组 ， 除 非 这 个 数组 已 经 存在 
// 然后 将 回调 函数 追加 到 这 个 数组 
(this. callbacks[ev] || (this. callbacks[ev] = [])).push(callback); 
return this; 


}, 




















publish: function() { 
// 将 arguments 对 象 转换 为 真正 的 数组 
var args = Array.prototype.slice.call(arguments, 0); 


// 拿 出 第 1 个 参数 ， 即 事件 名 称 
var ev = args.shift(); 





// 如 果 不 存在 _callbacks 对 象 ， 则 返 

// 或 者 如 果 不 包含 Pe 

Var list, calls, i, l; 

if (!(calls = this. callbacks)) return this; 

if (!(List = this. callbacks[ev])) return this; 

















// 触发 回调 

for (i = 0, \ = list.length; i < \l; i++) 
list[i].apply(this, args); 

return this; 


} 











}; 


// 使 用 方法 

PubSub.subscribe("wem", function(){ 
alert("Wem!"); 

}); 


PubSub.publish ("wem"); 
你 可 以 使 用 命名 空间 的 方式 来 管理 事件 名 称 ， 比 如 使 用 冒号 分 隔 符 (〈:)。 
PubSub.subscribe("user:create", function(){ /* ... */ }); 


如 果 你 在 使 用 jQuery， 可 以 关注 下 Ben Alman (http://benalman.com) 写 的 一 个 更 容易 
的 库 (htip:/gist.github.com/799721/c119783954e1b10551c4afef53b2c04fefcb7465)。 这 个 
库 非 常 简 单 ， 用 不 了 一 页 纸 : 


/ 
jQuery Tiny Pub/Sub - vO.3 - 11/4/2010 
http://benalman.com/ 


Copyright (c) 2010 "Cowboy" Ben Alman 
Dual licensed under the MIT and GPL licenses. 
http://benalman.com/about/license/ 


关 攻 和 
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*/ 


(function($)f{ 
var 0 = $({}); 


$.subscribe = function() { 
o.bind.apply( 0，arguments ); 
}; 


$.unsubscribe = function() { 
o.unbind.apply( 0，arguments ); 
}; 


$.publish = function() { 
o.trigger.appLy( o, arguments ); 
}; 
}) (jQuery); 
这 里 的 API 和 jQuery 的 bind() 及 trigger() 函数 的 参数 一 臻 。 唯 一 的 区 别 束 是 这 两 个 
函数 直接 保存 在 jQuery 对 象 中 ， 且 名 叫 publish() 和 subscribe(): 
$.subscribe( "/some/topic", function( event, a, b, c ) { 


console.log( event.type, a+ b+c ); 
}); 


$.publish( "/some/topic", "a", "b", "c" ); 


上 面 我 们 将 Pub/Sub 用 于 全 局 事件 ， 也 能 很 容易 地 将 其 用 于 局 部 事件 。 现 在 我 们 用 上 面 
提 到 的 PubSub 对 象 来 创建 一 个 对 象 的 局 部 事件 : 


Var Asset = {}; 


// 添加 PubSub 
jQuery.extend(Asset, PubSub); 


// 现在 就 可 以 用 publish/subscribe 函数 了 
Asset.subscribe("create", function(){ 
AR 
}); 
我 们 使 用 了 jQuery 的 extend() 来 将 PubSub 的 属性 复制 至 Asset 对 象 。 这 样 的 话 ， 所 有 
对 publish() 和 subscribe() 的 调用 均 是 针对 Asset 的 局 部 调用 。 这 在 很 多 场景 中 非常 
有 用 ,包括 对 象 关 系 映 射 (ORM) 中 的 事件 、 状态 机 及 当 Ajax 请 求 结束 时 的 回调 等 场景 。 
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Web Developerant 





基于 MVC 的 JavasScript Web 富 应 用 开发 


开发 Java3cript 窜 应用 程序 ， 特 息 面 程序 的 用 户 体验 还 人 人 Web 应  “ 强 到 向 读 者 栓 荐 此 书 ， 它 将 会 
用 程序 中 ， 不 是 一 忻 胶 单 的 事情 ， 臣 为 需要 将 限 务 器 问 的 复杂 府 教 你 如 何 构建 先进 的 富 应 用 程 
称 读 到 考 户 网 李 书 特 教 你 如 全 构建 位 屿 允 址 先 商 系 扒 的 应用 程 序 . 韦 中 纵 出 的 很 寺 优秀 的 工 
库 , 包 托 捆 构 . 模 声 . 想 架 和 服务 牙 庄 的 通信 入 很 过 其 他 的 方面 ， 具 和 最 佳 实 跟 都 是 禄 大 程序 内 


本 书 提供 去 量 的 实 筒 化 码 ， 这 些 实 便 六 西 能 才 助 你 更 好 地 齐 解 书 和 工程 师 在 工作 中 重 需 的 .我 


中 提 到 的 入 条 概念。 学 会 构建 Java5cript 应 用 也 全 提升 你 的 抱 枉 贡 A 
量 、 改 善 你 的 产品 的 用 户 体验 ， ， 

一 一 Addy osmanl 

美国 在 线 Javaseript 工 程 师 


m 悚 用 和 镇 型 -视图 - 榨 制 器 (MYC) 模式 ， 党 习 如 何 管理 应 用 
验 序 中 的 模块 悚 吉 。 


a 章 弓 模板 系统 和 数据 时 定 ， 

m 学 习 如 何 加 载运 星 数 据 ，Ax 以 及 器 域 请 求 。 
m 司 用 同 ebSocket 和 Node .js 创建 实时 应 用 ， 

ms 使 用 捧 役 变 忻 的 方式 来 实现 交 忻 上 传 进 度 条 ， 


m 学 习 使 用 主流 的 框架 和 库 ， 包 播 jQuery， Spine 和 和 
Backbone. 


m 编写 测试 代码 ， 并 使 用 控制 台 率 调试 你 的 程序 ， 
m 党 习 部 署 应 用 的 最 性 实 贱 ， 比 如 蚂 存 榨 制 和 居 码 压 闹 


Alex Maccaw 是 一 名 Roby/JavaSeript 了 程序 册 ， 在 开 沽 社区 中 要 有 部 
往 、 是 Spine 框 架 的 作者 ,开发 过 Taskforce，Socialmod 等 太 潮 开 千 O'REILLY 
项 目 。 同 时 活路 在 纪 的 。 旧 前 出 和 柏林 的 各 大 Roby/RaiB 全 说， oreilly.com.cn 


图 带 介 要; | Wb 开 妇 veSerin 


= 引 革 和 = 





[| 


LE PT | 
剖 | | | GG | 


Thir Burterined Eriicm for mje bn 由 ge mainind ce China eciudinz Hong Kionz, Maco and Tarwan| 定 情 : 5 元 





人 Ri Misa lnc 皖 相 叶子 工 业 出 生 竹 出 碟 
生硬 可 中 高 属 仆 央 于 宁国 志 呈 【和平 外 年 宙 国策 晴 ，” 帮 门 导 贡 打动 区 村 中 国 音 主 地 区 ] 情 亿 息 语 


